HTML 기초

블록 태그

제목: <H>
문단: <P>
리스트:

순서O: <OL><LI>
순서X: <UL><LI>

정의목록:

<dl> <dt>제목</dt> <dd>내용</dd> </dl>

div블록: <DIV>

화면 분할해서 레이아웃 설정시
여러 관련요소들을 하나로 그룹화 할
단축키: Ctrl + i

블록 태그의 특징

1. 자동 줄바꿈

2. 넓이값 미 지정시 무조건 부모요소의 넓이 100% 자동 할당
(ex: body 바로 아래에 태그가 들어가는 경우, body 넓이 100% 할당)

3. 너비, 높이 지정 가능

4. 블록, 인라인 모두 감싸기 있음

Style 스타일 적용

h1, h2, h3 {

border: 1px solid red;

border-radius: 13px; /* 끝부분을 둥글게 한다. */

}

자동완성 기능

ul>li{list}

ul 태그 안에 li를 넣는다. li는 list 텍스트를 감싼다.

<ul>

</ul>

ul>li>a[href=""]

대괄호는 속상 값을 설정한다.

<ul>

</ul>

ul>li*3{list$}

태그의 반복은 *n으로 한다. $는 숫자를 입력하게 한다.

<ul>

</ul>

h$*3{title$}

$는 태그에도 쓸 수 있다.

<h1>title1</h1>

<h2>title2</h2>

<h3>title3</h3>

div>h1{title}+p{content}

동일선상의 태그는 +로 표현한다.

<div>

<h1>title</h1>

<p>content</p>

</div>

div>h1{title}+ul>li*3{list$}

<div>

<h1>title</h1>

<ul>

</ul>

</div>

div>h1>a^ul>li*5>a

동일 선상 태그가 중간에 있을 경우 ^를 사용한다.

<div>

<ul>

</ul>

</div>

인라인 태그 특징 (블록의 반대)

1. 자동 줄바꿈 안됨

2. 인라인 요소로 깜산 텍스트의 크기가 자신의 크기

3. 너비, 높이 지정 불가능 ex) a 또는 span 태그에 width 입력 불가

4. 인라인만 감싸기 가능

인라인 태그를 블록, 인라인-블록 으로 변경

display: block / inline / inline-block

정렬의 차이

인라인: text-align
블록: margin

대표 인라인 태그 (닫는 태그 없다. 마지막에 /> 붙인다.)

페이지 이동을 위한 링크담당
title="태그의 작동 내용을 알려줌, 웹 접근성"

strong, em:
강조 기능
span:
인라인요소들을 그룹화, 특정 글자에 구분점을 줘서 꾸며줄때.

실무에서 자주쓰는 파일명 convention

camel case: 2개의 단어가 조합된 경우, 두번째 단어의 첫 글자만 대문자로 표기 (picUser.jpg)
snake case: 2개의 단어를 언더바로 이어붙이는 표기 (pic_user.jpg)

경로 설정법

상대 경로: 현재 작성하는 문서파일의 위치에 따른 상대적인 경로
절대 경로: 현재 작성파일 위치 상관없이 무조건 루트에서 찾는 경로

콘텐츠의 px기준

디바이스 사이즈만 신경 쓰는 것이 아니라, 디스플레이 환경도 고려해야 한다.
딱 디바이스 크기만 신경쓰지 말고, 몇 배율로 작업할지 협업자에게 물어봐야 한다.

인라인-블록 태그

1. 요소 자신의 크기만 할당 (inline)

2. 너비, 높이 지정 가능 (block)

3. 줄바꿈 안됨 (inline)

대표 인라인-블록 태그

블록과 인라인요소의 특징 모두 가지고 있는 요소
img:

이미지 입력
src="주소"
alt="이미지 설명"
나중에 사용할 모션을 감안해서 figure 감싼다. <figure><img></figure>
figure 안에 img를 딱 맞게 채우는 법.

figure {
width: 사이즈 입력;
height: 사이즈 입력;
border-radius: 50%; /* 원형으로 만들자. */
overflow: hidden; /* 넘치는 부분을 숨긴다. */
}
img {
object-fit: cover; /* 잘리더라도 원본 비율 유지하면서 꽉 채운다. */
object-fit: contain; /* 잘리지 않고 원본 비율 유지하되, 내부 여백이 생긴다. */
}

가상선택자: hover

hover를 사용할 때는 원래 스타일 값을 선언해야 한다.

아래와 같은 경우 main a가 있어야 한다.

main a:hover {

width: 150px;

background-color: hotpink;

transition: 0.5s;

opacity: 0.5; /* 본래 a 태그에 배경색을 주면, 배경색으로 바뀌는 느낌이 든다. */

transform: translateX(10px); /* 10px만큼 가로로 이동, -면 반대방향 */

transform: translateY(10px); /* 10px만큼 세로로 이동 */

transform: rotate(45deg); /* 45도만큼 회전 */

transform: scale(1.5); /* 1.5배 만큼 확대 */

transform: skewX(35deg); /* 35도만큼 비틀기 */

}

CSS 변수 생성

:root {

--point-color: green;

--point-color: 255, 105, 180;

}

main a:hover {

width: 150px;

background-color: var(--point-color);

transition: 500ms;

color: rgba(var(--point-color), 0.8); /* 색깔을 고정하고 투명도만 조절해서 사용한다. */

}

다른 방법

main p {

opacity: 0.7;

}

웹에서의 색상 표현 방식

- rgb(빛의 삼원색, red, green, blue)

- 가산혼합방식: 색상이 겹칠수록 더 밝아지는 개념

- 각 색깔별 허용치 (0~255)

- rbga를 쓰면 마지막 alpha값 이용해 투명도 조절 가능

LCH (lightness, chroma, hue) 색상 표현 방식

lightness: 밝기 0~100
chroma: 채도 0이 무채색
hue: 색상환 0~360

:root {

--point-lch1: lch(70% 60 180); /* lightness, chroma, hue*/

--point-lch2: lch(70% 60 180 / 0.5); /* lightness, chroma, hue, alpha 투명도 까지 추가*/

--point-lch3: 70% 60 180 /* lightness, chroma, hue*/

}

main p {

color: var(--point-lch1);

color: lch(var(--point-lch3) / 0.5);

}

HTML 기초

블록 태그

블록 태그의 특징

Style 스타일 적용

자동완성 기능

인라인 태그 특징 (블록의 반대)

인라인 태그를 블록, 인라인-블록 으로 변경

대표 인라인 태그 (닫는 태그 없다. 마지막에 /> 붙인다.)

인라인-블록 태그

가상선택자: hover

CSS 변수 생성

LCH (lightness, chroma, hue) 색상 표현 방식

댓글 쓰기