HTML/CSS 놓치기 쉬운 포인트
1. [block] vs [inline]
div와 다르게 span은 line break 되지 않는다.
div 같은 태그를 block element,
span과 같은 태그를 inline element라고 한다.
2. font-family 설정해줄 때
font-family: Georgia, "Times New Roman", serif;
"Times New Roman"처럼 폰트 이름에 띄어쓰기가 있으면 쌍따옴표를 사용해야한다.
3. margin, padding 설정 순서
margin: 10px 12px 10px 12px;top, right, bottom, left 순이다.
margin: 20px auto;이 경우 top, bottom은 20px이고 left, right는 여백을 맞춘다.
4. border 설정 순서
border: 두께 선스타일 색깔;
coding convention을 지키는 것이 중요한다.
5. 밑줄 효과를 줄 때
text-decoration: underline; 보다는
border-bottom을 통해 커스터마이징을 해준다.
이유는 위 방법이 자유로운 커스터마이징이 어렵기 때문이다.
6. CSS에서 width란 패딩, 마진, 보더를 제외한 값이다.
그러므로, width를 정하고 패딩, 마진과 같은 값들을 따로 주게 되면 예상한 레이아웃의 가로길이는 훨씬 크게 보인다.
속성 하나하나를 생각하며 레이아웃 짜는 것은 매우 불편하기 때문에 box-sizing: border-box;를 이용하는 것이 편하다.
7. 상속성질을 염두해 두어야 한다.
<body>
<p>body 태그 안에 있는 p태그
<span>p 태그 안에 있는 span</span>
</p>
</body>이러한 경우, 자식태그들은 부모태그의 속성을 상속받는다.
8. 다른 선택자에 동일한 스타일을 주고 싶은 경우, 그루핑을 한다.
p, span{
background-color: red;
}9. 클래스내의 태그와 태그 중 특정 클래스를 가진 경우, CSS를 구별해 야한다.
- pre라는 클래스안에 있는 span태그를 스타일링하는 경우
.pre span{
background-color: yellow;
}- span태그중 pre클래스를 가진 요소를 스타일링하는 경우
span.pre{
color: red;
}띄어쓰기의 유무를 잘 구별할 것!
10. CSS selector 우선순위
inline css >> id >> class >> tag
1000점 >> 100점 >> 50점 >> 1점
11. img추가 방법
태그 사용
- CSS 활용
CSS에서 background-image:url(~);을 이용한다.
이 때, width, height를 이용하면 이미지가 그만큼 잘린다.
background-size:100%를 이용하면 이미지를 온전히 보여줄 수 있다.
12.block 요소를 inline으로 혹은 inline 요소를 block 요소로 바꿀 수 있다.
- block to inline의 경우
.inline-p {
display: inline-block;
}
.float-left {
float: left;
}
.float-right {
float: right;
}- inline to block의 경우
.block-span {
display: block;
}- 번외) display: none;은 언제 사용하는가?
안보였던 정보들이 특정 조건을 만족한 경우 Javascript를 이용해 보여주는 경우, 컨텐츠를 숨기기 위해 사용한다.
13. table 만들기
tr로 행을 만들고
td로 열을 만든다.
td 대신 th를 사용해서 제목으로 설정할 수 있다.
th의 경우 bold체, 가운데 정렬이 적용된다.
devzunky@gmail.com