본문 바로가기

> HTML-CSS10

[HTML/CSS] position의 속성 5가지 (static, relative, absolute, fixed, sticky) Position 속성 5가지 1. static (2차원 속성) - 부모 자식 간 마진 병합 발생 여부 ( O ) - top, left, right, bottom 속성 사용 가능 여부** ( X ) - 자식의 높이값이 부모의 높이값(0일 때)에 영향을 주는지 여부 ( O ) 2. relative (2차원, 3차원 속성) - 부모 자식 간 마진 병합 발생 여부 ( O ) - top, left, right, bottom 속성 사용 가능 여부 ( O ) - 자식의 높이값이 부모의 높이값(0일 때)에 영향을 주는지 여부 ( O ) - 부모가 absolute라면, 부모의 top, left, right, bottom 값에 따라 위치가 설정된다 - (위에서 조정된 다음) 원래 static 이었을 때의 자리를 기준으로 .. 2020. 12. 29.
[HTML/CSS] class, id 각각 언제 쓰는 것이 좋을까? class는 "큰 그릇"이라 생각하는 것이 좋겠다 레이아웃(Layout)이나 컨테이너(Container)의 개념으로 생각하고 이들 관점에서 디자인을 입힐 때 사용하면 좋을 것이다 한편, id는 말그대로 "고유한 것"임을 주장할 때 사용하는 것이 좋다 하나의 카드가 될 수도 있고, 때로는 박스가 될 수도 있다 class와 id는 대체재 관계가 아니라고 생각한다 그러므로 각각의 특성에 맞게 사용하면 좋을 것 같다 2020. 11. 5.
[HTML] `<meta http-equiv="X-UA-Compatible" content="ie=edge">` 는 IDE에서 " ! [tap] " 을 누르면 항상 자동 생성되는 메타 정보 중 하나다. 어떤 의미를 가지는 것일까? 내용은 보이는 것만큼 어렵지 않다. 위 내용을 가지는 HTML 문서는 인터넷 익스플로러(이하 IE)에서 화면을 렌더링할 때(그릴 때) 최신 버전의 IE 렌더링 방식으로 화면을 출력하도록 그릴 수 있다. 따라서 인터넷 익스플로러(IE)를 지원하는 환경이라면 해당 내용을 덧붙여주어야 한다. 2020. 11. 4.
[CSS] padding 기본 사용법 padding 기본 사용법 - 폼은 margin과 비슷하다 (참고: bky373.tistory.com/184) - *padding은 추가된 값만큼 요소의 크기가 커진다 - 이때 box-sizing: border-box; 를 사용하면 요소 크기는 커지지 않는다! 1번- padding: 10px; 2번- padding: 10px 20px; 3번- padding: 10px 20px 30px; 4번- padding: 10px 20px 30px 40px; 1번 적용- padding: [위, 아래, 좌, 우]; 2번 적용- padding: [위, 아래], [좌, 우]; 3번 적용- padding: 위, [좌, 우], 아래; 4번 적용- padding: 위 우 아래 좌; 1번- padding: 10px; 2번- pa.. 2020. 10. 29.