2021.12.22 CSS의 기초 #2
CSS가 실제로 웹 디자인에 어떻게 사용되는지 알아보자.
http://www.kiweb.or.kr/index.html
이 링크를 비슷하게 만드는 것을 예시로
CSS를 이용해 HTML 문서를 디자인할 때 실제로 어떻게 활용되는지,
활용되는 기술과 성질의 값에 어떤 것들이 있는지 알아보자.
1. 해상도
웹 사이트를 만드는데 가장 이상적인 pixel이 있다. 이는 보통 모니터의 해상도를
감안해 결정하게 된다.
과거 모니터 해상도가 1024일땐 사이드바의 크기를 감안해 1004 픽셀 정도를 기준으로
레이 아웃을 결정했는데 모니터 해상도가 커지면서 최근엔 1200 픽셀을 기준으로 많이 잡는다.
여기서는 width: 100%로 잡고 가운데 정렬을 하는 방법을 사용한다.
width: 100% 는 한 줄 전체를 전부 사용하겠다는 것을 의미한다.
width:100%;
2. 기본 설정
2.1 HTML 문서, CSS 파일 생성
우선 HTML 문서와 그에 link될 CSS 파일을 생성한다.
<head>의 하단에 다음과 같이 적용하면 된다.
<link href=".\css\sample.css" type="text/css" rel="stylesheet">
(href의 파일 경로는 상황에 맞게 설정하면 된다.)
웹 사이트를 만드는데는 여러가지 element를 잘 배치하는 것이 중요하다.
종종 element안에 element가 들어가기도 하는데,
이럴 경우 정렬을 위해 css에서 다양한 성질을 조정해준다.
2.2 padding, margin 초기화
html문서에 사용되는 모든 element는 그 자체로 padding과 margin을 가지고 있다.
이 디폴트로 가지는 padding과 margin값들이 배치할 때 헷갈리게 하는 요소가 되므로
보통은 css 파일 최상단에 다음 코드를 추가해 디폴트값을 0으로 바꾼 후,
나중에 간격을 조절하는 방법을 사용한다.
*{ margin: 0; padding: 0; }
css에서 이렇게 값을 설정해주면 이후의 모든 margin과 padding의 디폴트값이 0으로 설정된다.
3. header 부분
여기서 header란 원본 웹사이트에서 개발자도구를 열었을 때
<div>의 이름이 header인 element를 의미한다.
header에는 사이트 로고와 메뉴가 있는데, 각각은 다른 element이지만
동일한 parent element에 속해있게 하고 싶다고 하자.
그렇다면 HTML 문서에 다음과 같이 코드를 추가할 수 있다.
<div id="header"> <h1 id="logo"> <a href="#"> /*"#"은 다른 곳으로 연결되지 않은 링크를 의미 */ <img src="로고.png위치"> </h1> <ul id="menu"> <li>학교소개</li> <li>교육과정</li> <li>취업정보</li> <li>커뮤니티</li> <li>상담신청</li> </ul>
이제 이 element들을 CSS 파일을 통해 잘 배치해주면 된다.
우선 parent element의 크기와 배경색을 먼저 정해보려면
CSS파일에 다음과 같이 추가해주자.
#header { width:1200px; height: 100px; background: #efefef; margin: 0 auto; padding: 20px 0 0 0; box-sizing:border-box; }
여기까지 하고 HTML문서를 열어보면 다음과 같이 나타난다.
여기서 <li> 들의 왼쪽에 붙어 있는 원을 제거하고 밑줄을 없애보자.
ul, li { list-style: none; }
a { text-decoraion: none: }
list-style을 제거하면 ul과 li element의 왼쪽에 붙은 원을 제거할 수 있고
text-decoration을 none으로 설정하면 밑줄을 제거할 수 있다.
이제 여기서 li들을 위로 올려 안으로 넣어보자.
우선 <h1> 이 block 속성을 가지므로 이를 바꿔 한 줄을 전부 혼자 쓰지 못하게
막아야 나머지 <li>들을 위로 올릴 수 있다.
이를 실행하는 방법은 여러 가지가 있는데
첫 번째로 <h1>의 디스플레이 속성을 inline-block으로 바꾸는 것이 있다.
#logo { display:inline-block; }
inline을 사용하면 될 것 같지만 display가 inline일 경우 style의 적용이 안된다.
그래서 inline임에도 style 적용을 받게하는 속성 'inline-block'이 등장했다.
#logo와 마찬가지로 #menu, 그 안의 <li>들도
동일하게 display 속성의 값을 바꿔준다.
#menu { display: inline-block; } #menu > li { display: inline-block; }
여기까지 하고 다시 html 문서를 열어보면 <li>가 상단으로 이동되었음을 확인할 수 있다.
두 번째 방법으로 float 속성을 추가하는 것이 있다.
보통 inline block보다는 일반적으로 이 방법을 자주 사용한다.
이는 element들의 위치를 조정해준다.
#logo { float: left; } #menu { float:right; } #menu > li { float:right; }
이렇게 코드를 수정한 후 (inline-block은 삭제) html 문서를 열어보면 다음과 같다.
float은 우선순위가 높아 상, 하위의 element 모두에 영향을 줄 수 있으므로 사용에 주의해야 한다.
이제 각 <li>들의 크기와 간격을 조정해보자.
#menu > li > a { display: inline-block; width:180px; color:#004385; font-weight:bold; padding: 20px 0 40px 0; }
이미 parent element인 header가 위쪽으로 padding을 20px 가지고 있으므로
하위 element인 <li>가 그 중앙에 오게 하려면 아래쪽에 40px,
위쪽엔 그보다 20px가 적은 20px만 주면 중앙에 위치시킬 수 있다.
여기까지 하면 상단 header의 레이아웃이 그럴싸한 모양새를 갖추게 된다.
4. Visual 부분
웹 페이지를 열면 가장 크게 보이는 그림을 뜻한다.
하단에 하나의 <div>를 더 만들고 그 안에 이미지를 넣자.
<div id="visual"> <img src="이미지파일 경로"> </div>
이제 이미지의 위치와 크기를 다음과 같이 조절한다.
#visual { width: 100%; height: 500px; } #visual > img { margin:0 auto; display:block; }
이제 그림의 하단의 메뉴도 구현할 수 있다.
<div id="visual">를 parent element로 삼아 하나의 <div> 를 더 만들고,
<li>로 header와 마찬가지로 컨텐츠를 채우자.
<div id="visual"> <img src="그림파일 위치"> <div id="visual_menu"> <ul> <li><a href="#">수강료 0원</a></li> <li><a href="#">중도포기란 없다</a></li> <li><a href="#">다가오는 메타버스</a></li> <li><a href="#">핀테크 5기 모집</a></li> <li><a href="#">취업률 1위</a></li> </ul> </div> </div>
header와 동일한 방법으로 <div id="visual_menu"> visual에 올려줄 수 있다.
#visual_menu { width: 1920px; background: black; } #visual_menu > ul { width: 800px; height: 50px; margin 0 auto; } #visual_menu > ul >li { float:left; margin: 0 auto; } #visual_menu > ul > li > a { color:#FFF; display:inline-block; padding: 14px 15px; box-sizing: border-box;
여기까지 하고 html문서를 새로고침하면 다음과 같이 visual 하단에 메뉴가 생겼음을 알 수 있다.
이제 하단 메뉴를 원본 사이트에서처럼 투명하게 만들어 줄 수 있다.
투명도를 조절하는 속성인 opacity를 추가하거나, background의 value을 rgba 형식으로 바꾸면
되는데, 여기서는 background의 value를 바꾸는 방식을 사용한다.
#visual > visual_menu { background: (0,0,0,0.3); /* 해당 특성을 추가 */ }
그런데 이렇게 하면 visual에 하단 메뉴가 겹치지 않고 아래로 떨어질 뿐더러,
투명하게 보이지도 않는다는 것을 알 수 있다. 여기서 등장하는 것이 z-value와
position attribute이다.
z-value는 여러 element가 겹칠 때, 그 중 어떤 것이 앞으로 올지 우선순위를 정해주는 값이며,
그 값이 클수록 앞에 올 우선권을 가진다고 볼 수 있다.
position은 두 element가 parent-child 관계일 경우 위치를 결정하는 역할인데,
두 가지 value 즉, absolute와 relative를 가질 수 있다.
parent element가 position 특성이 없고, child element가 absolute를 가지면
parent와 관계없이 child의 위치가 이동되고,
child가 position의 value로 relative를 가지면 parent element의 위치를 기준으로
child element의 위치가 이동된다.
이 경우, #visual > #visual_menu에 position:relative를 추가할 경우
#visual_menu의 parent element인 #visual이 position 속성을 갖지 않으므로,
<div id="visual_menu">는 <div id="visual"> 에 맞춰 이동한다.
이로 인해, 메뉴 바가 visual의 위로 올라가게 된다.
여기서 <div id="visual_menu">의 z-value를 높게 설정하면
<div id="visual_menu">가 <div id="visual"> 보다 앞에 오게 된다.
해당 child element가 얼마나 이동할지는 top, bottom, left, right 속성을 주고,
그 수치를 변경시켜 결정할 수 있다.
#visual > visual_menu { position:relative; bottom: 50px; z-value:2; /* 해당 특성 3가지를 추가 */ }
이 후, 다시 html 문서를 새로고침하면 원래 의도한 대로 메뉴 바가 visual 위에 투명하게
올라와있음을 확인할 수 있다.
마지막으로 메뉴중 하나의 <li> 만 불투명하게 만들고 싶다면 임의의 <li> 하나에만
class="on" 을 추가하고, css에서 class="on"인 element의 opacity를 1로 바꾸면 된다.
코드로 구현하면 다음과 같다.
<li><a class="on" href="#">수강료 0원 프리패스</a><li> /* html 문서에 추가 */
#visual > #visual_menu > ul > li > a.on { background: rgba(0,0,0,1); }
이렇게 하면 visual부분까지 구현이 끝난다.
5. 기타 - element 정렬
<div> 안에 또 다른 <div>가 있는 경우를 생각해보자.
이 경우, 내부 <div>는 외부 <div> 내에서만 움직일 수 있다.
즉, 외부 element가 움직이면 내부 element도 따라 움직이게 된다.
parent element와 마찬가지로 이 또한 좌측 상단에 우선적으로 배치되는데
중앙에 정렬을 하고 싶은 경우
margin 0 auto;
를 써주면 parent element의 크기가 달라져도 child element의 위치가
자동적으로 조정이 된다.
