지극히 주관적인 중요 지식. 뭐든 오래 쓰지 않으면 까먹기 쉬우니 종종 찾아보자.
1. HTML
1.1 HTML 구조
<!DOCTYPE html>의 의미
현재 버전을 알려주는 것. 현재의 문서가 HTML5임을 나타냄- HTML4, HTML5 문법 비교
1.2 해상도
- PC 해상도에 따라 요소의 크기가 결정됨
PC 해상도가 1920인데 이미지가 960px이면 화면의 절반의 차지.
해상도는 쉽게 말하면 한 화면에 몇 개의 점이 찍히는가임. 같은 해상도라도 모니터의 크기가 다를 수 있음 - 1px의 실제 크기는 PPI (Pixel Per Inch)에 따라 달라짐. 웹&모바일은 72ppi
- 안드로이드 사이즈 단위 DP, iOS에서 사이즈 단위 PT
- 이미지를 원래 크기보다 크게 키우면 픽셀 사이사이를 벌려서 평균값으로 채움
- 웹기획에서 PC화면 크기를 어떻게 잡아야 될까?
: 1536x864 FHD 노트북 해상도가 적당. 1920x1080에 125% 배율을 적용한 해상도 - 픽셀 밀도 (Pixel Density)에 대한 설명
1.3 JPG와 PNG (+lottie)
하나의 픽셀 저장하는데 24비트 (RGB) 필요. 예) 가로100세로100 픽셀이면 10010024 필요
- 너무 크기 때문에 압축 기법 적용
- 기법에 따라 PNG, JPG 등 다름
- JPG는 주로 사진 이미지, 나머지는 PNG로 많이 사용. GIF는 제한된 컬러로 사용
- 벡터 기반의 애니메이션 lottie
1.4 폰트
- 폰트는 컴퓨터에 설치돼 있는 폰트로 지정 가능. 혹은 웹폰트 사용
1.5 색상코드
- 하나의 컬러는 24비트 차지 (0~255, 2의 8승 사이)
- RGB 성분 비율 16진수, 10진수로 표현
#000000은 검정색#ffffff은 흰색
2. CSS
border-radius는 모서리의 호를 원으로 하였을 때 반지름 의미- <source> 태그 사용하여 여러 포맷의 파일 표현
- <source> 와 이미지 최적화 WebP(웹피) 사용 예시
- 전체 선택자는 보통 margin과 padding을 초기화 하는데 사용
2.1 Display 속성
- 레이아웃이 가로방향으로 진행되는 것을 인라인, 세로방향을 블록이라 함
- 인라인/블록의 기본 설정과 HTML 요소
| 인라인 (inline) | 블록 (block) |
| <span> <a> <img> <input> <textarea> <br> <button> <select> <option> <script> | <div> <p> <h1>~<h6> <form> <table> <ul> <ol> <li> <video> <header> <footer> <section> 등 |
- 인라인
줄바꿈 안됨 , width height 안됨, margint-top margin-bottom 안됨. padding은 다 됨 - 블록
자동 줄바꿈 됨. 나란히 배치는 안됨.
width height margin bottom 됨
2.2 블록 중앙정렬 margin : 0 auto
- 가운데 정렬 시킬 대상이 block인지가 중요. inline은 margin-left, margin-right 개념이 없기에 의미 없음
- 부모 안에서 가운데 정렬 됨
2.3 float 속성
- left, right 속성밖에 없음
- 사이드바&본문 section 잡을 때 주로 활용
- float속성 적용하면 공중에 띄워 좌측 또는 우측에 배치 (중요. display 속성은 무시됨).감싸고 있는 부모가 쪼그라들 수 있음
- 다음 요소가 새로운 줄에서 시작하게 하려면 clear:both 속성 적용
2.4 box-sizing: border-box속성
- padding을 주더라도 width가 늘어나지 않게 유지
2.5 position 속성
- relative : 원래 있어야할 위치(static) 기준으로 상대위치 지정
- absolute : static이 아닌 최초의 부모 요소 기준으로 상대위치 지정. 그래서 관례상 부모를 relative로 지정함
- sticky : 브라우저를 스크롤링할 때 효과가 같이 나타남
2.6 한 줄 라인 글자수 제한
.txt_line {
width:70px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}3. 반응형 웹
3.1 뷰포트
- 웹페이지를 모바일에서 보면 기본 viewport가 980px이고 이로 인해 내용이 작게 보임 (배율이 축소됨)
- 모바일 디바이스에 맞게 너비나 배율을 조정하기 위해 viewport 메타태그 사용
<meta name="viewport" content="width=device-width, inital-scale=1.0">
3.2 em과 rem
- 둘 다 CCS의
font-size속성값에 비례해서 결정되는 상대 단위
em은 부모의 폰트 사이즈 기준. rem은 최상위 태그기준. 보통 rem 사용 - 해상도에 따라 실제 px의 사이즈가 다르기 때문에 고정된 길이의 단위 pt사용
3.3 미디어 쿼리
3.4 flex, grid 속성
- 이번에야말로 CSS Flex를 익혀보자 : https://studiomeal.com/archives/197
- 이번에야말로 CSS Grid를 익혀보자 : https://studiomeal.com/archives/533
'WEB > HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] 서울대공원 키즈 사이트 (0) | 2023.08.10 |
|---|
