[HTML|CSS] HTML/CSS 를 작성할 때
HTML, CSS를 작성할 때
디테일을 하나하나 급히 채워나가는건 매우 복잡한 작업이기 때문에 그림을 그리듯이 전체적인 구도를 잡아놓고 디테일은 천천히 채워나가는 것이 중요하다
순서
1. 시각적인 디자인을 보고 마크업을 최소한으로 작성하기.
page가 몇개의 덩어리로 이뤄져있는지 파악하고 마크업을 작성하는 것으로 시작하자
Header, Content, Footer 같은 큰 덩어리부터 잡아두고 시작.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PROFILE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="contents">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
2. 세부적인 레이아웃을 잡아두기
각 태그마다의 콘텐츠들을 이때 추가
(예시 header의 경우)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PROFILE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<img class="profile" src="images/profile02.png" alt="">
<h1>JANE DOE</h1>
<p>FRONT-END DESIGNER</p>
</div>
<div class="contents">
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
3. box-shadow같은 속성을 통해 전체적인 윤곽을 확인하면서 채워나가는 것이 중요
현재 태그가 블록인지 인라인인지, 지금 페이지 내에서 얼마나 공간을 차지하고 있는지 등의 구성을 확인할 필요가 있기 때문에
h2 {
boxshadow : inset 0 0 20px red;
}
4. 중간중간 새로 들어온 요소의 기본 스타일은 초기화를 해두자
텍스트 관련 태그 등을 넣을때 기본으로 들어가는 스타일들 (padding, margin 등)을 초기화해두는 것
h1, h2, p {
margin : initial;
padding : initial;
}그 외 참고
1. img 하단에 생기는 빈 공간은 초기화 해두는 것이 좋다
img {
vertical-align : top;
}2. img를 background로 넣어야할까 img태그로 넣어야할까
만약 이미지가 별 다른 기능없이 decoration이 목적이라면 background로 넣는 것이 좋을듯 하다
3. mdn 문서를 통해 프로퍼티마다의 초기값이 뭔지 인지하는 것도 좋다
예를 들어 width의 초기값이 auto이고 margin의 초기값이 0임을 알고 코드를 작성하는 것과 모르는 것의 차이는 분명할 것이기 때문
4. height 설정은 지양하고 width, margin으로만 작성하는 것이 좋을 수 있다
상속
부모의 속성을 상속받는 것
상속되는 속성이 있고 아닌 속성이 있다
inherit value는 부모의 속성을 억지로 상속받게 할 수 있는 기능이 있다
width 100%와 inherit은 같은 기능을 하는가
-> 결론적으론 다르게 동작하는 경우가 있다
예를 들어
부모가 width : 50%, 자식1이 inherit, 자식2가 100% 로 설정되어 있는 경우
자식1은 25%만큼 값을 가져가게되고, 자식2는 부모와 같은 50% 만큼의 값을 가져가게 된다
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
h1{
margin:0;
font-size: 12px;
}
.wrap {
width: 200px;
border: 10px solid black;
padding: 10px;
}
.header {
box-shadow: inset 0 0 20px green;
width: 50%;
padding: 50px 0;
}
.header :nth-child(1){
box-shadow: inset 0 0 10px blue;
width: 100%;
}
.header :nth-child(2){
box-shadow: inset 0 0 10px red;
width: inherit;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<h1 class = "box">100%</h1>
<h1 class = "box">inherit</h1>
</div>
</div>
</body>
</html>