본문 바로가기

안드로이드 웹앱 콘테츠 개발자 양성(국비지원)/HTML+ CSS29

HTML+CSS ( 기초) 홈페이지 화면 영역 구성 (flex, 반응형 웹 적용 ,따로 기능 없음) 자바 스크립트를 사용하지 않음. 기능은 따로 없음 flex를 이용하여 배치하고, 반응형 웹을 이용하여 크기가 작아졌을 시 모바일 전용 화면 구현하는 예제이다. 우선 최종 화면의 위에서 부터 아래로 차근차근 비슷한 모양으로 작성해보자. 두 번째 영역을 만들자. (주황색 네모 부분) 메뉴 처럼 보이는 navigation bar를 만들자. 그 밑에 보이는 글씨들을 써보자. 콘텐츠 영역을 왼쪽, 나머지 부분으로 나눌것이다. 왼쪽 사이드 내용 외의 내용은 본문 영역에 작성하자. 이제 두 번째 네모에 주황색 배경 및 배치(스타일)를 적용해보자. navigation bar의 배경색과 그안의 메뉴 글씨를 정렬하자. 마우스 커서를 올렸을때, 색을 변경하여 효과를 주겠다. (hover 이용) footer영역은 따로 빼주겠.. 2019. 12. 10.
HTML+CSS (기초) flex 스타일 적용하기 1-2 최종 화면보단 flex를 이용한 그때그때 스타일을 하나하나씩 보는게 좋다. (배치, 정렬) 수평으로 배치하고, align-items: flex-start를 하면 요소는 수평 배치, 정렬은 위 기준으로 된다. 수평으로 배치하고, align-items: center를 하면 요소는 수평(가로) 배치, 정렬은 가운데 기준으로 된다. 수평으로 배치하고, align-items: fiex-end를 하면 요소는 수평(가로) 배치, 정렬은 아래 기준으로 된다. 수평으로 배치하고, align-items: stretch를 하면 요소는 수평(가로) 배치, 부모 사이즈만큼 늘린다. 수평으로 배치하고, align-items: baseline를 하면 요소는 수평(가로) 배치, 요소 안의 글씨 아래 기준으로 정렬된다. 두 번째, 요.. 2019. 12. 10.
HTML+CSS (기초) flex 스타일 적용하기 1-1 최종 화면보단 flex를 이용한 그때그때 스타일을 하나하나씩 보는게 좋다. (배치, 정렬) 알아보는게 많아서 flex 스타일 적용하기 1-2 까지 이어진다. flex의 예를 보기 위해서 우선 div로 샘플을 만들자. 구분을 위해 배경색과 margin을 줌. display: flex를 주면 자식들 요소가 inline-block처럼된다. (자세한 사항은 : display 속성) 개수가 많으면 더차이를 알 수 있어서 임의로 만들었다. 개수가 많아서 스크롤이 된다. 만약 자동으로 줄바꿈을 하고 싶다면 flex-wrap: wrap;을 해주자. flex-wrap을 안주어도 기본 값이 nowrap인 것을 알 수 있다. flex-wrap: wrap-reverse는 만약 개수가 많아 자동 줄바꿈이 될때, 새로운 줄이 위.. 2019. 12. 10.
HTML+CSS (기초) 부모 요소, 자식 요소 사이즈 영향 - 블럭, 인라요소에 따라 부모 요소 크기에 영향을 주는 것을 볼 수 있다. 블럭 요소는 부모에 영향을 주지만, 인라인 요소는 부모 요소에 영향을 못준다. 주의! 인라인 요소중 부모 요소에 영향을 주는 요소도 있음 우선 블럭 요소가 부모 요소에 영향을 주는 것을 알아보자. div안에 p요소(Hello)를 만들자. 요소에 영향주는지 알기 위해 모든 요소에 점선을 표시해보자. div와 p요소 구분을 위해 div에 파란색 점선으로 바꾸겠다. 이제 div에 있는 p에 padding을 주면 어떻게 될까?( div에 영향을 줄까?) padding을 더 크게 주면 그거에 비례하여 감싸고 있는 div 크기도 따라서 커진다. (영향을 받음) - 블럭요소 이제 인라인 요소로 알아보자. 우선 margin을 주었다. 그러나 .. 2019. 12. 10.
HTML+CSS (기초) 홈페이지 만들기 스타일 시트 적용 (media 이용, 기능 없음) 하나의 html문에 모바일, 데스크탑용 두개의 스타일 시트 적용 600px 이하는 모바일 css가 적용되고, 600px 이상일 시 데스크탑용 css 파일이 적용된다. 우선 최종 화면과 같이 만들기 위해 위에서 부터 글을 작성한다. 텝 메뉴처럼 보이는 메뉴 이름을 ul의 li로 만들자. article요소는 각각 독립적인 내용을 담을때 사용한다. 이미지 3개를 article요소로 묶고 그안에 배치에 따라 첫 큰이미지 1개, 수평 배열이 된 이미지2개는 section요소로 묶겠다. footer는 원래는 이미지로 하지 않는다. (브라우저가 늘어나면 깨짐 현상 발생) 예제이므로 그냥 이미지로 대체함. 이제 html에 글을 다 작성하였으면, css로 스타일을 적용하겠다. 미리 만들 company.css 파일을 링크.. 2019. 12. 10.
HTML+CSS (기초) media 스타일 적용하기 2 (브라우저 크기에 따라 사이즈 조절) 브라우저 화면 크기에 비례하여 스타일 적용하기 최종 화면과 같이 만들기 위해 우선 네모(div로 구분)를 만들자. 전체적으로 오른쪽에 딱 붙어있다. 브라우저 화면 기준 가운데로 오게 하자. 네모의 구분을 위해 배경색을 주겠다. media를 주어서 600px 이살일때 네모를 감싸고 있는 div에 사이즈를 50%로 만들겠다. (전체를 감싸고 있는 div를 줄이면 안에 요소도 같이 작아진다.) div는 기본으로 마진값을 가지고 있다. (그래서 50%로 사이즈를 줄이면 화면은100%비중이므로 한 줄에 2열로 네모가 배치되어야 하지만 안된다. div에 margin 6px가 있기 때문에, margin을 없애주면 한 줄에 2열로 네모가 배치된다.) 만약 800px 이상 브라우저가 커졌을 때 옆으로 배치하겠다. (네모.. 2019. 12. 10.
HTML+CSS (기초) media 스타일 적용하기 (브라우저 크기에 따라 사이즈 변경) - 브라우저 크기에 따라 다르게 스타일 적용 브라우저 크기에 맞게 커지게 조절을 할 수 있다. 만약 화면이 작으면 작은 사이즈로 보여주고, 크면 크게 보여주기 우선 네모를 만들고 알맞게 적용해보자. 고정된 네모가 있지만, media를 통해서 조건에 부합할 시 안에 코드 내용으로 적용이 된다. (min-width:560px 의미 : 최소 사이즈가 560px 이므로 560px 이상일 시 적용 된다.) 지금까지는 한 파일에서 코드를 적었지만 css파일을 따로 만들어서 적용이 가능하다. 조건이 만족할때 변경할 사항을 기재한다. 그리고 링크 시, media 속성을 주어 조건을 준다. - 브라우저 크기에 따라 다르게 스타일 적용 01_mediaquery.html 1 2 3 4 5 6 7 8 9 10 11 12 13.. 2019. 12. 10.
HTML+CSS (기초) 홈페이지 화면 만들기 (기능 거의 없음- 화면 구성) 카테고리를 선택할 시, 해당 html을 화면 가운데 영역에 보여준다. 주의! 로그인, 메뉴텝 등은 기능을 구현하지 않음! 만드는 순서는 HTMl 내용을 먼저 작성하고, 그 후에 CSS파일을 만들어서 적용한다. 아래 사진은 수정해서 a요소 안에 글자를 썼지만, 실행 화면 캡쳐할때는 li에 글씨를 넣어서 링크가 안먹었다. 코드는 맞지만, 실행화면(실수)에 링크 걸린게 안보일 것이니 참고.. nav영역에 텝 메뉴에 들어갈 이름을 쓰자. 이제 카테고리를 만들고, 카테고리를 눌렀을 시 보여줄 iframe을 section영역에 만들자. 쇼핑카트 목록과 카트 링크도 생성해준다. 로그인 창을 만들자. 마지막 footer 영역에 임의로 글자를 썼다. 이제 CSS 파일을 만들어서 스타일을 적용하자. 다시 index.htm.. 2019. 12. 9.
HTML+CSS (기초) animation 만들어서 적용하기 ( 공이 움직이는 모습) (예제에서는 10번 반복 튀기도록 하였다.) 원을 만들기 위해 우선 네모를 만들자. 사각형에 가로, 세로 길이의 반 만큼 border-radius 속성을 주면 원이 된다. 애니메이션 효과를 주기 위해선, 애니메이션을 만들어야 한다.그리고 animation-name으로 적용. 이제 공을 튀기는 효과를 해보자. 새로운 움직임을 할 애니메이션을 만들자. 적용하면 위, 아래로 움직이지만.. 움직임이 속도가 똑같아서 공이 튀기는것 같지 않다. 위 사진 코드를 추가하면, 공이 튀기고 공중에서 붕뜬 느낌이 있은 후 다시 밑으로 하강한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37.. 2019. 12. 9.

티스토리툴바