UIUX 웹퍼블리셔 과정 24-7
■ HTML/CSS 기초 ■ HTML이란?○ HTML : HyperText Markup Language- HyperText : 하이퍼 링크(참조)를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트- Markup : 표시 (콘텐츠를)- Language : 언어> 하이퍼 텍
kimyws.tistory.com
- 박스는 너비가 기본적으로 최대치이다.
- id와 class의 이름을 지을 때는 의미를 부여.
ㄴ 예) contents-left-box, contents-r-img ...
- 같은 소성이 있다면 같이 써주기
- border 값은 동일하기에 모든 div에 적용
- ","를 사용해 그룹화 가능
- 스타일 속성을 사용하지 않으면 높이는 0
※ 기본 우선순위
- 아이디 >> 클래스 >> 태그
- 동일형태일 경우 아래가 우선적용
※ px과 em
- px: 절대크기
- em: 상위 태그의 상태크기 (배수?)
ㄴ font-size를 px로 고정할 경우 사용자가 브라우저에서 변경하려고 해도 변경불가능
ㄴ 한마디로 px을 사용자의 설정값을 덮어씀
ㄴ em은 해당 단위가 사용되고 있는 요소의 font-size를 기준으로 px로 바뀌어 화면에 표시됨
ㄴ 같은 엘리먼트에 설정된 폰트 값이 없을 경우 상위 요소의 폰트 사이즈가 기준이 됨
ㄴ body 태그에서 폰트 사이즈 30px
ㄴ a클래스에서 2em
ㄴ 따라서 60px
※ text-align
- block 내부에서 텍스트 정렬 방식을 정의
※ 컬러
- 색상 정의
- #fff
- RGB 수준 16진수
※ display
- none: 보이지 않음
- block: 블럭
- inline: 인라인
- inline-block: 인라인블럭
※ block (블럭요소) ★★★
- 다음요소는 새 줄에서 시작
- 기본적으로 전체의 너비를 차지
- 너비: 부모요소의 전체 너비를 차지
- 높이: 설정가능
- 여백: 모든 방향 가능
- 블럭요소 태그 예시: div
※ inline (인라인요소)
- 같은 줄, 이전요소 바로 뒤에서 시작
- 크기: 콘텐츠 너비를 차지
- 너비와 높이 설정 불가능
- 여백: 상하불가, 좌우가능
- 인라인요소 태그 예시: span
※ inline-block (인라인블럭요소)
- 같은 줄에 나란히 배치 (like inline)
- 너비 지정 가능 (like block)
- 인라인블럭요소 태그 예사: button
- span은 inline요소.
ㄴ 너비와 높이 지정 불가능
- <br>: 줄바꿈 태그
- block요소인 div태그를 display를 사용해 inline-block으로 변환 가능
- 한 줄에 배치 가능 (inline의 특성)