[SeSAC 새싹 UIUX 4기] Day32~Day33 HTML, CSS 기초
UIUX 디자인 및 웹 퍼블리싱 SeSAC 새싹 마포 4기
2024.01.18 32일차 수업: HTML, CSS 기초(8)
2024.01.19 33일차 수업: HTML, CSS 기초(9)
단위
디자이너가 쓰는 단위는? 무조건 px !!
여러단위들
- %(percent)
- em(element)
- rem(root element)
- vw(viewport width)
- vh(viewport height)
HTML의 기본 폰트 사이즈!!
16px
%
%: 상위요소의 넓이/높이가 기준이 된다
em
em : 현재 요소의 폰트 사이즈가 기준 (현재 요소의 폰트 사이즈 = 1em)
(부모 요소에게 상속받는 경우; 현재 요소의 폰트 사이즈가 없는 경우: 부모 요소의 폰트 사이즈 = 1em)
Q. 글자가 커질 때 padding의 크기도 그 비율에 맞춰서 커지게 하고 싶다면?!
A. padding도 px이 아닌 em으로 주면 비율에 맞춰서 함께 커진다!
rem
rem : r=root 최상위 요소의 폰트사이즈가 기준 (최상위 요소의 폰트사이즈 = 1rem)
vh
vh(viewport height) : viewport height 기준(전체 높이=100vh)
어떤 높이에서든 전체 높이의 50%만 주고 싶다 = 50vh
vw
vw(viewport width) : viewport width 기준 (전체 넓이=100vw)
어떤 넓이에서든 전체 넓이의 50%만 주고 싶다 = 50vw
반응형 웹(Responsive Web)
Media Query 미디어 쿼리
CSS3은 미디어 타입을 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 확장하였는데, 이를 미디어 쿼리라고 한다.
미디어 쿼리 문법
▪️ 미디어 타입의 종류
실제로 많이 쓰이는 건 all, screen, print
쉼표(,)를 통해 미디어 타입을 나열하면 나열한 모든 미디어 타입을 뜻함
- all : 모든 미디어 타입
- aural : 음성 합성장치
- braille : 점자 표시 장치
- handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도
- print : 인쇄 용도
- projection : 프로젝터
- screen : 컴퓨터 스크린(대부분의 컴퓨터와 모바일 기기를 뜻함)
- tty : 디스플레이 능력이 한정된 텔렉스, 터미널, 또는 수동 이동 장치등 고정 된 글자를 사용하는 미디어
- tv : 음성과 영상이 동시 출력 되는 장치
- embrossed : 페이지에 인쇄된 점자 표지 장치
▪️ 미디어 쿼리 속성과 속성값
min- 또는 max- 를 붙여서 최솟 값 , 최댓 값을 판단
속성은 and (속성 : 속성 값) and (속성 : 속성 값)으로 나열 할 수 있으며 min- max-를 이용 할 경우 범위로도 설정이 가능
- width : 웹페이지의 가로 길이를 판단
- height : 웹페이지의 세로 길이를 판단
- device-width : 단말기의 물리적인 가로길이를 판단합니다. 즉, 기기의 실제 가로 길이를 판단
- device-height : 단말기의 물리적인 세로길이를 판단합니다. 즉, 기기의 실제 세로 길이를 판단
- orientation : width와 height을 구하여 width 값이 길면 landscape로, height 값이 길면 portrait로 판단
- aspect-ratio : width/height 비율을 판단
- device-aspect-ratio : 단말기의 물리적인 화면 비율을 판단
- color-index : 단말기에서 사용하는 최대 색상수를 판단
- monochrom : 흑백 컬러만을 사용하는 단말기에서 흰색과 검은색 사이의 단계를 판단
- resolution : 지원하는 해상도를 판단합니다. 값으로 dip(인치당 도트 수)나 dpcm(cm당 도트 수)를 사용
- color : 단말기에서 사용하는 최대 색상 수의 비트 수를 판단(자연수를 쓰지만 2의 지수를 뜻함.예: 1 은 2 , 2는 4 , 3은 8...)
min- / max -
- min-width: 500px
min => 최소, 이상
작은 것부터 적는다 - max-width: 500px
max => 최대, 이하
큰 것부터 적는다
반응형 짜보기
- 너비가 320px 보다 작기 때문에 지정된 스타일이 없어서 기본html 스타일로 출력
- (min-width: 320px) and (max-width: 767px)에 의해 그 사이 너비에서는 초록색 바탕 및 해당 스타일로 출력
- (min-width: 768px) and (max-width: 1199px)에 의해 그 사이 너비에서는 하늘색 바탕 및 해당 스타일로 출력
- (min-width: 1200px)에 의해 1200px 이상의 너비에서는 background-color를 따로 지정해주지 않았기 때문에 기본html 스타일인 흰 바탕 및 해당 스타일로 출력됨
Table 태그
표는 보통 행(row)과 열(column)으로 이루어져 있다.
표의 행(row)은 무한히 만들 수 있으며, 각 row는 셀(cell)로 구분된다.
그 셀은 < td > 태그로 이루어져 있다.
- < table >
- < caption > 테이블의 제목
- < thead > 표 중 제목 table head
- < tbody > 표 중 내용 table body
- < tfoot > 표 중 요약 table foot
- < th > 테이블의 열 table head
heading이기 때문에 가운데 정렬, 볼드가 기본값
th → 제목의 방향 설정 scope: "col" / "row" - < tr > 테이블의 행 table row
- < td > 테이블의 행 table data
td 속성: rowspan(행 합치기), colspan(열 합치기)
table을 만들 때는 < thead >, < tbody >, < tfoot >으로 sementic 태그를 달아주는 것이 좋다.
table cell 병합
제목 셀(th)이나 내용 셀(td)은 colspan 속성이나 rowspan 속성을 이용하여 셀을 병합할 수 있다.
- colspan
열(column)이 서로 다른 셀을 병합할 때는 colspan 속성을 사용
- rowspan
행(row)이 서로 다른 셀을 병합할 때는 rowspan 속성을 사용
Form 태그
form 입력양식
< form > < /form >
action: "서버에 설치된 연결할 프로그램 경로 설정"
method: 웹서버와 통신하는 방법 지정 post / get
post= 노출됨
-> 주문서, 회원가입
get= 노출안됨
name:
fieldset
< fieldset > < /fieldset >
form 안에서 내용을 그룹핑하는 태그
fieldset 안에서는 legend 범례 필수!!
< legend > < /legend > 곧 fieldset의 제목
< input >
type= text / password / submit / reset / button / checkbox / radio / file / email / search / ...
< select > < /select >
< text > < /text > 한 줄 입력
< textarea > < /textarea > 여러 줄 입력
required(필수 입력) / readonly(값변경불가) 등
checkbox, radio -> checked 기본으로 미리 선택된 상태
select-option -> selected 기본으로 미리 선택된 상태
vertical-align 속성
block이나 inline 안에서 inline 요소들의 상하정렬 맞출 때 사용
자식 요소에게 지정
Pseudo-Class 의사(가상) 클래스 :
의사 클래스는 특정 상태에 있는 요소를 선택하여 스타일을 적용할 때 사용되고 일반적으로 사용자 상호작용이나 요소의 상태에 따라 스타일을 변경하는데 활용된다.
의사 클래스는 콜론(:)으로 시작한다.
아래에 적힌 건 예시이고 더 많은 아이들이 있당,,
Simple Pseudo-Classes
- :first-child 자식 요소 중 첫번째 요소
- :last-child 자식 요소 중 마지막 요소
- :only-child
- :nth-child() 자식 요소 중 n번째 요소
- :invalid
User Action Pseudo-Classes
- :hover
사용자가 일반적으로 링크인 요소 위로 포인터를 이동하는 경우에만 적용 - :focus
사용자가 키보드 컨트롤을 클릭하거나 사용하여 요소에 초점을 맞추는 경우에만 적용 - :active
- :checked
Pseudo-Element 의사(가상) 요소 ::
기존 요소에 클래스를 적용하기보다는 마크업에 완전히 새로운 HTML 요소를 추가한 것처럼 행동
의사 요소는 이중 콜론(::)으로 시작한다.
아래에 적힌 건 예시이고 더 많은 아이들이 있당,,
- ::first-line
- ::before 내용 앞에 삽입
-> 대상 요소의 첫번째 자식으로 존재하지 않는 요소 추가 - ::after 내용 뒤에 삽입
-> 대상 요소의 마지막 자식으로 존재하지 않는 요소 추가
