게으른 나에게

🔹 레이아웃 관련• space-x-2 : 자식 요소 사이의 가로 간격을 0.5rem (8px) 만큼 띄움• ml-auto : margin-left: auto; 로 설정하여 해당 요소를 오른쪽 끝으로 정렬• relative : 부모 요소를 상대적인 위치로 지정 (기본 위치에서 이동 가능하게 만듦)• overflow-hidden : 넘치는 콘텐츠를 숨김• aspect-square : 너비와 높이를 동일하게(1:1 비율) 설정하여 정사각형으로 만듦• inset : top, right, bottom, left 값을 한 번에 지정하는 속성 (ex: inset-0 → 모든 방향 0)• border-b : 아래(border-bottom)에 선을 추가• max-w-sm : 최대 너비를 small (24rem = 38..

11-1 변형 알아보기transform과 변형함수css에서 변형을 적용하려면 transform 속성과 변형함수 이름을 함께 작성해야 함.transform: 함수웹 요소를 이동시키는 변형함수: translate()웹 요소를 x축으로 50 px, y축으로 100px 이동하는 클랙스 선택자 .photo를 정의..photo { transform: translate(50px, 100px) 2차원 변형: 웹 요소를 평면에서 변형. x축은 오른쪽으로 갈수록 값이 커지고, y축은 아래로 내려갈수록 값이 커짐.3차원 변형: x축과 y축 원근감을 주는 z축을 추가해서 변형. z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작아짐.2차원 변형함수종류설명translate(tx, ty)지정한..

10-1 연결 선택자종류형식설명하위 선택자상위요소 하위요소상위요소 포함 모든 하위요소 선택자식 선택자부모요소 > 자식요소부모요소 포함 자식요소만 선택인접 형태 선택자요소1 + 요소2요소1 이후 먼저 오는 형제요소 선택형제 선택자요소1 ~ 요소2요소1과 형제인 모든 요소 선택 10-2 속성 선택자종류선택요소예시[속성]해당 속성있는 요소[required][속성 = 값]지정한 속성값 있는 요소[target + _blank][속성 ~= 값]지정한 속성값 포함 요소(단어별)[class ~=button][속성 ㅣ=값]지정한 속성값 포함 요소(하이픈,단어별)[title l= us][속성 ^= 값]지정한 속성값 시작 요소[title ^= eng][속성 $= 값]지정한 속성값 끝나는 요소[href $= xls][속성 *..

7.1 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기1. 플렉스 박스 레이아웃플렉스 박스 레이아웃은 1차원 레이아웃 설계를 위해 CSS3에서 추가된 개념. 플렉스 박스 레이아웃의 구성 요소는 다음과 같음.※ 레이아웃 확인 방법: 웹 브라우저에서 지원하는 방법으로 플렉스 박스 레이아웃 확인 가능. 크롬 브라우저에서는 개발자 도구 사용.구성요소설명주축(main axis)플렉스 박스의 빈행 방향과 수평한 축교차축(cross axis)주축과 수직하는 축플렉스 컨테이너(flex container)display 속성 값으로 flex나 inline-flex가 적용된 요소플렉스 아이템(flex item)플렉스 컨테이너와 자식 관계를 이루는 태그 요소 2. 플렉스 박스 레이아웃 기본 속성속성 설명displayflex..

09-1 배경색과 배경범위 지정하기배경 이미지 관련 속성속성설명background-color배경색 지정background-clip배경색이나 이미지를 어디까지 적용할지 지정background-image배경에 이미지 삽입background-repeat배경 이미지의 반복 여부 지정background-position배경 이미지의 위치 지정background-origin배경 이미지를 배치할 기준 지정background-attachment배경 이미지를 문서에 고정background하나의 속성으로 배경 스타일을 한꺼번에 지정background-size배경 이미지의 크기 조절 선형 그러데이션 관련 속성종류설명방향끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어 최대 2개 까지 사용할 수 있음. 사용할 수 있는 예..

6.1 CSS의 특징 살펴보기1. CSS 특징 1) 기본 스타일 시트는 웹 브라우저에 기본으로 내장된 스타일 시트를 말함. 2) 적용 우선순위는 같은 태그에 스타일 속성이 중복으로 작성 됐을 때, 어느 속성을 적용할지 결정하는 기준. 적용 우선순위는 개별성 규칙의 점수에 따라 계산 됨.선택자예점수전체 선택자*0태그 선택자div, p, h11가상 요소 선택자::before, ::after1클래스 선택자.box, .title10가상 클래스 선택자:hover, :visited, :link10아이디 선택자#title, #main100인라인 선택자style="color:red"1000 3) 상속은 부모 요소의 속성을 자식 요소가 물려받는 것을 말함. 4) CSS에는 절대단위: Px / 상대단위: em, rem, ..

5.1 기본 선택자 사용하기1. 선택자선택자는 CSS 속성을 적용할 대상을 선택하는 문법으로, 다양한 종류의 선택자를 지원 2. 기본 선택자 1) 전체 선택자: 모든 태그를 선택자로 지정.* { /* CSS 코드 */ }  2) 태그 선택자: 태그명으로 선택자를 지정.태그명 { /* CSS 코드 */ }  3) 아이디 선택자: id 속성값으로 선택자를 지정#id속성값 { /* CSS 코드 */ }※ id 속성값은 HTML문서 안에서 고유한 값이어야 함.  4) 클래스 선택자: clss 속성값으로 선택자를 지정.class속성값 { /* CSS 코드 */ }  5) 기본 속성 선택자: HTML 태그에서 사용할 수 있는 속성과 값으로 선택자를 지정[속성] { /* CSS 코드 */ }[속성=값] { /* CS..

4.1 CSS 문법 살펴보기1. CSS 기본 문법 CSS의 기본으로 선택자와 선언부로 구성된 문법 형태를 가짐.h1(선택자) {color(속성): red(값);} -선택자: CSS 속성을 적용할 대상(태그, 요소)을 지정하는 영역. -선언부: 선택자로 지정된 대상(태그, 요소)에 적용할 CSS 속성과 값을 적는 영역입니다. 2. 주석주석은 코드에 설명을 남기는 것을 말함. CSS에서 주석 내용은 /*와 */ 사이에 작성할 수 있음./* 주석 내용 */ 4.2 CSS 적용하기3. CSS 적용 방법CSS를 HTML 문서에 적용하는 방법은 3가지 -내부 스타일 시트 방법: HTML 문서 내부에 style 태그로 CSS 코드를 작성해 적용하는 방법. -외부 스타일 시트 방법: 별도의 CSS파일을 만들어 HTM..

08. 레이아웃을 구성하는 CSS 박스 모델CSS와 박스 모델 블록레벨 요소와 인라인 레벨 요소 -블록레벨 요소: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것. 해당 요소의 너비가 100%. 왼쪽이나 오른쪽에 다른 요소가 올 수 없음. (,, ) -인라인 레벨 요소: 한줄을 차지하지 않음. 콘텐츠 만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음. (, , ) 박스 모델 크기 웹 문서의 블록 레벨 요소는 모두 박스 형태임. -박스 모델 요소: 스타일 시트에서는 이렇게 박스 형태인 요소 콘텐츠 영역 크기 지정종류설명너비나 높이의 값을 px이나 em 단위로 지정박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정auto박스 모데의 너빗값과 높잇값이 ..

07. 텍스트를 표현하는 다양한 스타일글꼴 관련 스타일 글꼴 기본형{ font-family: | [, ] ※ 기본형 기호 이해하기1. |는 나열한 옵션 중 하나가 값이 되어야 한다는 의미.2. 속성값을 나열할 때 키워드(약속한 값)는 그대로 나열.3. 속성값을 나열할 때 값이 아니라 유형이라면 로 묶음. 이때 다른 속성을 유형처럼 사용할 수 있음. 글꼴 적용body { font-family:"맑은 고딕", 돋움, 굴림 } 글자 크기font-size: ￨ ￨ ￨ 단위: em, rem, ex, px, pt 폰트 속성{ font-style: normal ㅣ italic ㅣ oblique } 글자 굵기{ font-weight: bold ㅣ lighter }  웹폰트@font-face { font-fami..