web18 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. 08. HTML 메타(meta) 요소 ○ 메타데이터 - 데이터에 대한 데이터 - 데이터를 설명하는 데이터 (e.g. 사진 정보를 보면 나오는 날짜, 장소 등) - HTML 또한 데이터이기 때문에 그에 대한 메타데이터(문서 정보, 작성자 등)가 존재 ○ HTML meta 요소 - HTML 문서에 대한 정보를 안에 태그를 이용해서 넣는다 - : HTML문서에서 사용하는 문자셋을 인코딩 (필수) - : HTML문서에 대한 설명 (선택) - : 검색엔진 키워드 정의 (선택) - : HTML문서를 만든 사람 (선택) - : 뷰포트 설정 (필수) - : 정해진 시간마다 주기적으로 HTML문서를 새로고침 (선택) 2022. 4. 2. 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. 이전 1 2 3 다음
