디자인은 단순히 예쁜 화면을 의미하는 것이 아니라 의사 결정, 사고 방식을 포함하는 개념임을 잊지 말자.
레이아웃을 만드는데 앞서 우선 html을 구성하는 각 태그가 block element인지 inline element인지 알아야 한다. div, ul, li, h1~h6과 같은 태그는 block element에 속한다. 그리고 a, span, img 등의 태그는 inline element에 속한다. Block element는 box-model을 따르며 inline element는 그렇지 않으므로 둘을 올바르게 구분할 수 있어야 원하는 결과물을 얻을 수 있다.
img 가운데 정렬 (* inline element 가운데 정렬)
img 태그로 작성된 내용이 text-align: center;에 의해 가운데 정렬이 된다는 점에선 다소 불만스러운 부분이 있지만 어쨌든 inline element에 대한 가운데 정렬엔 text-align 스타일 속성이 쓰인다고 한다. 모든 태그 요소에 대해 하나의 방법으로 horizontal align과 vertical align 속성을 지정할 수 있다면 누구에게나 좋은 상황일텐데 표준화란게 참 어렵긴 어려운가 보다.css 별도 파일로 구분하기
역할이 다른 내용은 서로 다른 파일로 관리하는 것이 바람직하다. 특히 인라인 스타일은 지양해야 한다. css 파일은 별도 파일로 분리하는 것이 관리 측면에서 좋다.<link rel="stylesheet" href="style.css">
레이아웃
화면을 구성할 때엔 레이아웃을 먼저 생각해야 한다. 당연한 얘기지만 큰 단위에서 작은 단위로, 작은 단위에서 더 작은 단위로 구체화 시켜 나가야 한다. 개별 요소에 대한 style은 가장 나중의 일이다.
화면 요소의 단위를 나누는 데에도 일종의 룰, 컨벤션이 있다. header - contents - footer의 3분할 구성이 일반적으로, 가장 외곽의 div는 wrapper라든가 container라든가 하는 이름을 붙인다
<div class="wrapper">
<div class="header"></div>
<div class="contents"></div>
<div class="footer"></div>
</div>
기본 스타일을 무효화 해보자.
h2, ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
선택자, selector는 특정 요소에 스타일을 지정하거나 동작을 부여할 때 활용되는 개념이다. 상위-하위의 관계를 표현해 특정 요소를 한정할 수 있으며 별도로 부여한 class나 id 값을 기준으로 특정 요소를 지정할 수 있다. (class는 '.'으로, id는 '#'으로 참조한다.) 그리고 :hover 등의 가상 선택자를 통해 특정 액션에 대한 스타일을 지정해줄 수도 있다.
.section li:hover {
border-left: 5px solid dodgerblue;
color: dodgerblue;
}
.info {
background-image: url(images/icon-info.png);
background-repeat: no-repeat;
background-position: right center;
}
끝.
화면 요소의 단위를 나누는 데에도 일종의 룰, 컨벤션이 있다. header - contents - footer의 3분할 구성이 일반적으로, 가장 외곽의 div는 wrapper라든가 container라든가 하는 이름을 붙인다
<div class="wrapper">
<div class="header"></div>
<div class="contents"></div>
<div class="footer"></div>
</div>
Reset css
h1, li 등의 태그엔 bold체로 지정된다든가 bullet이 붙는다든가 하는 등의 기본적으로 할당되는 스타일이 있다. 거슬린다면 스타일을 제거하고 원하는 형식으로 새롭게 지정해줄 수 있다. 크롬의 검사 기능이 유용하게 쓰이는데 크롬의 검사 기능을 이용하면 각 요소가 잡히는 사이즈를 확인할 수 있을 뿐만 아니라 기본으로 지정된 스타일이 무엇인지에 대해 알 수 있다.기본 스타일을 무효화 해보자.
h2, ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
선택자
자세한 내용은 w3schools.com reference를 참고하자. (https://www.w3schools.com/cssref/css_selectors.asp)선택자, selector는 특정 요소에 스타일을 지정하거나 동작을 부여할 때 활용되는 개념이다. 상위-하위의 관계를 표현해 특정 요소를 한정할 수 있으며 별도로 부여한 class나 id 값을 기준으로 특정 요소를 지정할 수 있다. (class는 '.'으로, id는 '#'으로 참조한다.) 그리고 :hover 등의 가상 선택자를 통해 특정 액션에 대한 스타일을 지정해줄 수도 있다.
.section li:hover {
border-left: 5px solid dodgerblue;
color: dodgerblue;
}
.info {
background-image: url(images/icon-info.png);
background-repeat: no-repeat;
background-position: right center;
}
끝.