본문 바로가기

css기초10

10. CSS RWD(Responsive Web Design) & Media Queries ○ 반응형 웹 디자인 (RWD; Responsive Web Design) - 다양한 화면 크기에 맞게 웹사이트의 레이아웃(Grid)이 달라지는 웹페이지 - PC, 스마트폰, 태블릿 등 접속하는 기기에 따라 화면의 크기가 자동으로 변하도록 디자인 - 모든 장치에서 HTML문서를 잘 보이게 하기 위해 뷰포트 설정 필요 ( 08. HTML 메타(meta) 요소 참고) ○ 미디어 쿼리 (Media Queries) - 반응형 웹을 구현하기 위한 핵심기술 중 하나 - 화면 사이즈를 인식해 크기마다 각각 다르게 CSS를 적용하는 것 - 보통은 스마트폰, 태블릿, PC 3가지 화면 정도를 구분해줌 @charset "UTF-8"; /* layout.css */ /* https://www.w3schools.com/css/.. 2022. 4. 8.
09. CSS Transition & Animation ○ 트랜지션 (Transition) - 속성의 스타일이 변하는 속도를 조절 - 이벤트에 의해 발생함 - transfrom과도 같이 사용 가능 (08. CSS Transform 참고) - 형식 : transition: (속성) 시간 (변화효과) ; 마우스를 올리면 시계방향 80도 회전&색변화(1초동안) 마우스를 올리면 너비가 300px로 변화(0.5초동안) HTML 삽입 미리보기할 수 없는 소스 ○ Animation - 트랜지션과 비슷하게 속성의 스타일을 변화하게 하지만 보다 세부적으로 조절 가능 - 이벤트 없이 시작, 정지, 반복을 조절가능함 - 형식 : @keyframes 애니메이션이름 { from {애니메이션 시작 스타일} to {애니메이션 끝 스타일} } 5초동안 너비가 100px에서 500px로 .. 2022. 4. 7.
08. CSS Transform ○ Transform(변형) - 웹 문서의 텍스트나 이미지를 변형(이동, 회전 등) - 2차원 변형(2D Transforms) : 수평, 수직으로만 (x축) - 3차원 변형(3D Transforms) : 수평, 수직, 앞뒤로 (y축) - 형식 : transform: 변형함수; ○ 2D Transforms ① rotate - 지정한 각도만큼 회전 - 형식 : transform: rotate(각도); - 각도는 "숫자deg"로 표현 - 각도가 양수면 시계방향, 음수면 반시계방향 B I N S ② skew - 지정한 각도만큼 기울기 - 형식 : transform: skew(x축각도); transform: skew(x축각도, y축각도); transform: skewX(x축각도); transform: skewY(.. 2022. 4. 6.
07. CSS display 속성 ○ display 속성 - 해당 요소가 화면에 어떻게 보일지를 지정 - display : none; 해당 요소를 화면에 출력하지 않음 - display : block; 해당 요소를 블록 레벨로 지정 - display : inline; 해당 요소를 인라인 레벨로 지정 (margin, float 적용X) - display : inline-block; 인라인 레벨요소이면서 블록 레벨 속성을 갖도록 지정 (margin, float 적용O) display: none: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. HELLO WORLD! Vestib.. 2022. 4. 1.
06. CSS Positioning (float, z-index) ○ float - 세로배치(기본)된 요소를 가로배치로 변경 - 왼쪽이나 오른쪽으로 배치가능 - 형식 : float : left | right ; BOX 1 BOX 2 BOX 3 BOX 4 ○ clear - float 속성 해제 - folat 속성을 해제하지 않으면 모든 요소들이 앞의 요소의 옆에 줄줄이 따라오므로 clear를 이용해 해제해 준다 - clear : left | right | both ; ○ z-index - 레이어 순서 정하기 - 가장 큰 수가 위로, 레이어 순서값은 음수도 허용 aa bb cc ○ 전체 레이아웃 구성하기 - position(배치방법), float(수평정렬), clear(float해제), z-index(레이어순서)를 사용해 화면 레이아웃을 구성 Header Section1 .. 2022. 3. 31.
05. CSS Positioning (position 속성) ○ Positioning (포지셔닝, 레이아웃) - 브라우저 화면 안에 박스 형태의 각 콘텐츠를 원하는 위치에 배치 하는 것 - 수평, 수직, 그리드 방향으로 배치할 수 있다 ○ Position 속성 - 형식 : position: static | relative | fixed | absolute | sticky ; - top, right, bottom, left 속성으로 위치를 지정 (상하좌우 여백으로 위치 조정) ○ 부모·자식 구조 (=Tree구조) - 부모(Parent) : 상위에 하위 요소를 감싸고 있는 요소 - 자식(Child) : 하위에 있는 요소 ○ Position : static - 문서의 흐름에 맞춰 배치 (가장 기본) - 수직으로만 배치 (top, right, bottom, left, z.. 2022. 3. 30.

티스토리툴바