본문 바로가기

Notes/HTML & CSS5

HTML & CSS chapter. 5 CSSCSS Layout레이아웃이란? 구성요소를 공간에 효과적으로 배열하는 일 또는 그 기술CSS 레이아웃이란? 웹 요소를 페이지 내에 적절한 위치에 배치하는 기술대표적인 CSS 레이아웃 기술들일반적인 문서 흐름display 속성flexible box (flexbox)gridfloat 속성position 속성...Flexbox참고사이트플렉스박스란?행(row) 또는 열(column)을 기준 축으로 하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식flex container: 요소들을 담고 있는 부모 요소flex item: flex container에 배치되는 자식 요소flexbox는 다양한 속성을 통해 레이아웃의 형태를 구성할 수 있으며,flex container에 지정되야 할 속성과 flex item.. 2024. 9. 4.
HTML & CSS chapter. 4 CSSTransformtranslate(x, y): x축, y축을 기준으로 이동scale(x, y): x축, y축 기준으로 n배 만큼 확대 및 축소skew(x deg, y deg): x축, y축을 기준으로 회전rotate(deg): 지정 각도만큼 회전Transition스타일 속성을 바꾼다.시간 및 변화 속도를 지정하여 다양한 효과를 구현할 수 있다.단축 속성(shorthand property)로, 실행 시간, 실행 방법, 지연 시간에 대한 정보를 한 번에 명시할 수 있다.두 가지의 시간 value가 함께 쓰였을 때, 각각 순서대로 -duration, -delay에 적용된다.하위 속성을 개별적으로 명시하고자 할 때 접미사-property: 변화시키고자 하는 대상의 property e.g. transform.. 2024. 9. 3.
HTML & CSS chapter. 3 CSSDisplay태그별로 inline element와 block-level element로 나뉘는데,CSS의 display property를 이용하여 inline과 block을 지정할 수 있다.display의 값에 따른 특징none: element를 숨긴다.block: block-level element로 만든다.inline: inline element로 만든다.inline-block: inline element + block-level element다른 element들과 한 줄에 위치가 가능width과 height에 따라 크기 조절 가능padding과 margin의 사용이 자유로움Float문서의 흐름: 좌 → 우float property가 적용된 element는 문서의 흐름에서 제외되고,parent .. 2024. 9. 2.
HTML & CSS chapter. 2 CSSCSS: Cascading StyleSheet연달아 스타일을 정의하는 문서를 뜻한다.스타일 선언문 CSS Style Declarationselector { property: value; property: value; property: value;}선택자 selector: 스타일을 적용할 요소다수의 요소에 같은 스타일을 적용하고자 한다면, 콤마 ,를 이용해 선택자를 나열할 수 있다.all selector: 모든 요소 선택e.g. *element selector: 요소 자체를 선택. 같은 이름의 태그가 모두 선택된다.e.g. div, h1id selector: id값으로 요소를 선택e.g. #idclass selector: class값으로 요소를 선택. 같은 이름의 클래스를 가진 모든 요소가 선택.. 2024. 8. 30.
HTML & CSS chapter. 1 HTMLHTML: HyperText Markup Language hypertext: 링크를 통해 다른 곳으로 연결되는 텍스트markup language: 문서를 구조적으로 표현하는 언어 html 파일은 문서 타입을 선언하는 Document Type Declaration 로 시작한다.meta 태그는 특정 정보에 대한 정보를 제공하는 속성 attribute을 갖는다. meta 태그의 attribute 종류 charset: 문자 인코딩 방식 지정name에 따른 contentname: 문서의 메타데이터 항목명author: 문서 작성자description: 문서 설명keywords: 문서 키워드content: 메타데이터 항목에 대한 값http-equiv에 따른 content 웹 페이지의 동작이나 브라우저.. 2024. 8. 30.

티스토리툴바