-
CSS 크기 단위, 디스플레이, selectorfront-end/HTMI CSS 2023. 6. 7. 11:02728x90
1. 크기 단위
- em : 부모의 크기를 기준으로 하는 상대 배수 단위
- 2em : 부모의 2배 크기
- rem : 문서 폰트 크기에 따른 상대 배수 단위
<body> <span id="px"> px로 조절 </span> <P> <span id="em"> em으로 조절 </span> </P> <br> <span id = "rem"> rem으로 조절 </span><style> #px { font-size: 10px; } p{ font-size: 10px; } #em{ font-size: 2em; } #rem { font-size: 3rem; } </style>
2. display
block 웹페이지의 가로 공간을 모두 차지하는 속성
ex) div, p, h1, ul, ol, table...inline 내용만큼만 너비를 가지는 속성
ex) span, a, strong, texttarea...none 해당 요소를 보이지 않게 지정 - block
- width, height 값 설정이 가능
span { background-color: brown; }
span { background-color: brown; display: block; }
- inline
- width, height 값 설정이 불가능
- 이미 '컨텐츠 만큼!!'으로 크기 설정 한것
p{ background-color: blueviolet; }
p{ background-color: blueviolet; display: inline; }
- none
- 해당 하는 요소를 보이지 않게 지정
<body> <h1 id="question">오늘 점심 뭐드세요?</h1> <h1 id="answer">뉴진스의 하입보이요</h1> <h1>네?</h1> </body>#answer{ display: none; background-color: pink; }
3. CSS selector
- 클래스 selector는 .클래스명{ } 이렇게 적을 수 있고 모든 class="클래스명"을 가진 요소에 스타일을 적용
- 아이디 selector는 #아이디명 { } 이렇게 적을 수 있고 모든 id="아이디명" 속성을 가진 요소에 스타일을 적용
- 태그 selector는 p { 스타일~~ } 이렇게 적을 수 있고 모든 <p> 태그에 스타일을 적용
- CSS selector의 우선 순위
- style="" (1000점)
- #id (100점)
- .class (10점)
- p (1점)
728x90'front-end > HTMI CSS' 카테고리의 다른 글
CSS margin, padding, border, position (0) 2023.06.07 CSS 공간분할태그, 가시속성 (0) 2023.06.07 CSS 기본 구조 및 선택자 (0) 2023.06.05 HTML 입력 양식 태그 & 이미지 클릭으로 링크 이동 (0) 2023.06.03 HTML 기본 태그 & 코드 정렬 커맨드 (0) 2023.06.02 - em : 부모의 크기를 기준으로 하는 상대 배수 단위