본문 바로가기

[HTML&CSS]5

[css] grid grid 레이아웃은 2차원의 레이아웃 시스템을 제공하는 것으로 주요 페이지 영역을 설계하거나 작은 UI 요소를 배치하는 데 사용한다. flex와 다르게 grid는 겹치는 콘텐츠를 제어할 수 있다. 중첩의 우선 순위는 z-index 프로퍼티로 제어한다. grid 레이아웃을 사용할 때는 그리드 속성을 사용하고 싶은 컨테이너에 display: grid를 선언하여 사용한다. 컨테이너의 아이템들이 그리드 아이템이 된다. 👉여기서부터 grid container 속성 1) grid-template-rows, grid-template-columns: 행과 열의 크기나 이름을 정의한다. 같은 크기의 공간으로 나눌 경우 repeat 함수를 사용할 수 있다. 2) grid-template-areas: 나누어진 격자를 기준으.. 2022. 9. 19.
[css] flexbox flexbox는 뷰포트의 요소나 크기가 불명확하거나 동적으로 변할 때 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 레이아웃 방식이다. flexbox를 1차원이라 칭하는 것은 레이아웃을 다룰 때 하나의 차원(행이나 열)만을 다루기 때문이다, 이는 행과 열을 함께 조절하는 grid와 대조되는 점이다. flex 속성을 사용할 때에는 내가 자유롭게 배치하고 싶은 항목들을 감싸고 있는 컨테이너를 flex로 지정한다. flex로 지정된 컨테이너의 일차 자식이 flex 항목이 된다. 👉여기서부터는 flexbox 속성 1) flex-direction: 주축(main-axis)를 결정한다. row: 열의 정방향 row-reverse: 열의 역방향 column: 행의 정방향 column-reverse:.. 2022. 9. 18.
[css] transform, transition, animation 1. transform 요소에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여하는 속성. transform 대부분의 함수는 XYZ를 붙여 한 축으로만 변환하는 기능으로 사용할 수 있다. 함수 값 기능 rotate(10deg) / rotate(0.5turn) 시계 방향으로 회전. 음수로 작성하면 시계 반대 방향. scale(2, 3) width 2배, height 3배 확대. 축소하고 싶을 땐 1보다 작은 값 써주기. skew(10deg, 20deg) x축 10도, y축 20도 회전. translate(100px, 200px) / (12px, 50%) 위치 변경. 2. transition transition은 요소의 두 가지 상태 사이의 변화를 설정해 주는 속성이다. 요소의 각 상태는 :hover나 :.. 2022. 9. 14.
[html] 기본 태그 2 많이 쓰이는 32개의 태그 중 나머지. § div 태그 division의 약자. block 요소로 레이아웃을 나눌 때 주로 사용한다. class나 id 값을 붙여 css와 함께 사용. § span 태그 div처럼 레이아웃을 나누는 태그로 css와 함께 사용한다. div와의 차이는 inline 요소라는 점. § script 태그 코드 삽입을 위한 태그. 따로 파일을 만들지 않고 코드를 참조하기 위해 사용한다. 보통 javascript 코드를 넣는 것으로 사용. body의 가장 아래에 넣어 쓰며, 파일을 분리할 때는 다음과 같이 작성하여 연결해 준다. § style 태그 css 설정을 같은 웹페이지 안에서 정의할 때 사용. style 태그로 css를 입력하는 방식을 인터널 방식이라고 한다. head 태그 안.. 2022. 9. 14.
[html] 기본 태그 1 많이 쓰이는 32개의 태그 중 일부. § 제목 태그 어쩌구 저쩌구 어쩌구 저쩌구 ... 어쩌구 저쩌구 제목이나 부제목에 사용. 숫자는 정보의 중요도를 나타내며 숫자가 클수록 폰트 사이즈 작음. 크기 조절용으로 사용하지 말 것! § 본문 태그 어쩌구 저쩌구에 대한 본문 내용 본문 내용을 담는 태그. p 태그끼리 이어서 쓰면 p태그 덩어리 사이에 한 줄 공백이 자동으로 들어가므로 p를 사용해 여백 조절하지 말고 css를 통해 스타일링 할 것. § 줄바꿈 태그 본문 내용 중에서 행갈이 하고 싶은 부분에 태그 하나만 적용. § 수평선(가로줄) 태그 내용의 분리 등을 위해 가로줄을 긋고 싶을 때 사용하는 태그. § 이미지 태그 상대 경로 절대 경로 § 리스트 태그 메뉴1 메뉴2 unordered list의 약자로.. 2022. 9. 12.

티스토리툴바