HTML, CSS 개괄

원지·2022년 9월 19일

HTML, CSS

목록 보기
1/1

🔗 HTML 개요

✒️ HTML이란

웹 문서의 콘텐츠를 구성하는 언어로 웹페이지가 어떻게 구조화되어 있는지 알 수 있는 마크업 언어입니다. 웹 문서의 뼈대를 구축하고 구조를 만드는 과정입니다.

  • 요소
<태그>내용</태그>

HTML 요소는 내용을 중심으로 여는 태그와 닫는 태그로 구분됩니다. 태그 사이에는 일반적인 텍스트 뿐 아니라 새로운 요소도 들어갈 수 있습니다.

  • 부모와 자식 관계
<ul>
	<li>내용1</li>
    <li>내용2</li>
</ul>

하나의 태그 안에 여러 개의 태그가 존재할 때, 밖을 감싸고 있는 ul 태그를 부모 요소라고 하고, 내부에 있는 li 태그를 자식 요소라고 합니다.

  • 빈태그
<태그/>

태그는 보통 여는 태그와 닫는 태그로 구성되지만, 여는 태그와 닫는 태그를 한 번에 작성하는 태그들이 존재합니다.

  • 속성과 값
<태그 속성="값">내용</태그>

빈태그는 각각의 역할을 명확하기 위해 속상과 값을 이용해 기본적인 기능을 확장합니다. 속성은 시작 태그의 내부에 정의하며 선택사항입니다. 속성의 개수에는 특별한 제한이 없습니다. 태그명과 속성 정의는 공백으로 구분합니다.

예를 들어

<img src="./cat.jpg" alt="고양이"/>

이미지 태그에 src 속성은 삽입될 이미지의 경로를 명시하고, alt는 삽입될 이미지에 대한 설명을 담고 있습니다.

  • 전역속성

전역 속성은 모든 HTML 태그에서 공통으로 사용할 수 있는 속성으로 id, class, style, title 등이 있습니다.

id 속성은 요소에 고유한 이름을 부여하는 식별자 역할 속성으로 태그당 하나씩만 지정할 수 있습니다.
class 속성은 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성으로 다중 지정 및 중복 지정이 가능합니다.
style 속성은 요소에 적용할 CSS 스타일을 선언하는 속성이며, title 속성은 요소의 추가 정보를 제공하는 텍스트 속성으로 사용자에게 툴팁을 제공합니다.

  • 글자와 상자

요소가 화면에 출력되는 특성으로 크게 인라인 요소, 블록 요소 2가지로 구분됩니다.

인라인 요소는 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도입니다. 인라인 요소는 하나의 글자처럼 취급되기 때문에 줄바꿈시 띄어쓰기가 발생하며 기본적으로 수평으로 쌓입니다. 글자를 취급하는 요소기 때문에 가로 세로 사이즈를 지정할 수 없습니다. 대신 가로 사이즈와 세로 사이즈가 자신이 포함한 콘텐츠만큼 자동으로 줄어듭니다. 요소의 외부 여백도 지정할 수 없으며 인라인 요소 안에는 블록 요소를 넣을 수 없습니다.

블록요소 또한 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도입니다. 위에서 아래로 요소가 수직으로 쌓이는 특징을 가지고 있습니다. 부모요소의 크기만큼 자동으로 가로너비가 늘어나며 요소의 내부, 외부 여백을 지정할 수 있습니다. 블록 요소 안에는 인라인 요소, 블록 요소를 모두 넣을 수 있으며 인라인 요소에 비해서는 제약 사항이 적습니다.

📝 HTML의 핵심요소

  <div></div>

블록요소로 특별한 의미가 없는 구분을 위한 요소입니다. 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그입니다.

  <h1></h1>

제목을 의미하는 요소로 숫자 1일 때 가장 크고 6일 때 가장 작습니다.

  <p></p>

문단 요소를 나타내는 태그로 하나의 p태그는 하나의 문단을 표현합니다. 

<img src="img/icon.jpg" alt="아이콘 이미지"></img>

이미지 표시할 때는 사용하는 태그로 닫는 태그가 없어도 되는 단일 태그입니다. src 속성은 이미지의 url을 입력받는 속성, alt 속성은 대체 텍스트를 입력 받아 이미지 유실 상황에 대비하는 속성입니다.

<ul>
  <li>사과</li>
  <li>딸기</li>
  <li>복숭아</li>
</ul>

ul태그는 순서가 필요없는 목록의 집합을 의미합니다. li태그는 목록 내 각 항목으로 ul태그와 li태그는 한 세트입니다. ul 태그는 반드시 자식으로 li태그를 지니고 있어야 합니다.

순서가 필요한 목록의 집합의 경우 ol태그를 사용하면 됩니다.

<a href="https://www.naver.com/">NAVER</a>

인라인 요소로 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소입니다. a 태그 요소는 herf 속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외 다른 url로 연결할 수 있는 링크(현재 문서에서 다른 문서로 이동할 수 있는 수단)를 만듭니다.

target 속성을 통해 현재 탭 혹은 새 탭에서 페이지를 열 수 있습니다.

target="_self" 현재 탭에서 열기(기본값)
target="_blanck" 새탭으로 페이지를 여는 속성

<span></span>

특별한 의미가 없는, 구분을 위한 인라인 요소입니다.

<br/>

줄바꿈 요소(Break)로 HTML은 엔터를 무시하기 때문에 br태그를 사용하여 줄바꿈을 합니다.

<input type="text"/>

사용자에게 데이터를 입력 받는 요소로 type 속성을 통해 입력받을 데이터의 타입을 명시합니다.

e.g.)button, submit, checkbox, color, date, email, file, image, number, range …

value 속성은 사용자가 값을 입력하기 전에 미리 입력된 값을, placeholder 속성은 사용자가 입력할 값의 힌트를 제공하며 disabled 속성은 입력요소를 비활성화합니다.

<table>
  <tr>
    <td>A</td><td>B</td>
  </tr>
  <tr>
    <td>C</td><td>D</td>
  </tr>
</table>

table 태그는 표를 나타내는 태그입니다. tr태그는 table row의 약자로 표 내부에서 행을 나타내는 태그고, td태그는 table data의 약자로 일반적인 칸을 나타내는 태그입니다.

🔗 CSS 개요

웹 문서를 꾸며주기 위해 사용하는 언어(색상, 크기, 위치 등)로 HTML 문서가 존재하지 않을 때는 단순 텍스트에 불과합니다.

🗂 css의 선택자와 상속

  • 선택자
선택자 {속성 : 값;}

선택자는 스타일을 적용할 대상이며 속성은 스타일의 종류입니다. 속성에는 어떤 스타일(색상, 크기 등)을 정의하고 싶은지에 대한 정보가 들어가며 값에는 그 속성을 어떻게 정의하고 싶은지에 대한 정보가 들어갑니다.

  • 선택자 종류

선택자의 종류에는 기본 선택자, 복합 선택자, 가상 클래스 선택자 등이 있습니다.

-기본 선택자

전체 선택자 : 모든 요소를 선택

*{ color: blue; }

태그 선택자 : 태그의 이름으로 요소를 선택

p{ color: blue; }

클래스 선택자 : 주어진 class 속성값을 가진 요소 선택

.text{ color: blue; }

아이디 선택자 : 주어진 id 속성값을 가진 요소 선택

#topic{ color: blue; }

-복합 선택자

일치 선택자 : 각각의 선택자를 동시에 만족하는 요소 선택

span.text{ color: blue; }

하위 선택자 : 요소 안에 위치하는 모든 p요소 선택

div p{ color: white; } div

자식 선택자 : div 요소의 바로 아래에 위치하는 모든 p 요소 선택

div > p{ color: white: }

인접 형제 선택자 : h1 요소의 바로 뒤에 오는 형제 p 요소 선택

h1 + p{ color: white: }

일반 형제 선택자 : h1 요소의 뒤에 오는 형제 중 모든 p 요소 선택

h1 ~ p{ color: white: }

-가상 클래스 선택자 : 요소가 어떤 특정한 상태가 되었을 때 해당 요소를 선택

a:hover { color: red;}

hover : 요소에 마우스 커서가 올라가 있는 동안 선택
active : 요소에 마우스를 클릭하고 있는 동안 선택
focus : 요소가 포커스되면 선택
nth-child() : 형제 사이에서의 순서에 따라 요소 선택

-가상 요소 선택자 : 요소의 내부 앞에 내용을 삽입

.box::before {
	content: '';
    display: block;
    width: 30px;
    height: 30px;
    background-color: blue;
   }

after : 요소의 뒤에 의사 요소를 생성 및 추가
before : 요소의 앞에 의사 요소를 생성 및 추가
first-line : 블록 레벨 요소의 첫 번째 선에 스타일을 적용
marker : 목록 기호의 스타일을 적용
placeholder : 입력 요소의 플레이스홀더 스타일을 적용

  • 스타일 상속

CSS는 부모 요소에게 적용된 글자/문자 관련된 속성들이 하위요소까지 적용됩니다.
그 외의 속성들을 강제로 상속하고 싶을 경우 값에 inherit을 적으면 됩니다.

선택자가 겹치는 경우, 기본적으로 나중에 작성된 스타일이 적용됩니다.
선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정됩니다.
선택자 우선순위는 아이디 선택자, 클래스 선택자, 태그 선택자 순입니다.

🧑‍🎨 CSS 속성

  • 박스 모델

브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지합니다. 이 영역을 ‘박스’라 표현하는데, CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정할 수 있습니다.

  • CSS 단위

모니터 상의 화소 하나 크기에 대응하는 절대적인 크기 px(픽셀), 상대적 백분율 %, 요소의 글꼴 크기에 대응하는 상대적인 크기 em, 루트 요소의 글꼴 크기에 대응하는 상대적인 크기 rem, 뷰포트(현재 실행중인 스크린 크기에 맞춰 상대적 크기 반환) 가로 너비의 백분율 vw,뷰포트 세로 너비의 백분율 vh가 있습니다.

  • 너비
div { width: 100px; height: 100px;}

요소의 가로 너비와 요소의 세로 너비는 width와 height를 통해 지정할 수 있습니다. 기본값은 auto고 max-width, min-width를 통해 너비의 최대값과 최소값을 지정할 수 있습니다.

  • margin
div { margin : 10px 20px 30px 40px;}

요소의 외부 여백을 지정하는 속성으로 여러 값을 한 번에 정의할 수 있습니다. 이 경우 위를 기준으로 시계 방향으로 값이 적용됩니다.

  • padding
div { padding: 10px;}

요소의 내부 여백을 지정하는 속성으로 요소의 크기에 영향을 미칩니다. 마진과 마찬가지로 상하좌우의 값을 한 번에 정의할 수 있습니다.

  • border
div { border: 5px solid red;}

요소의 테두리선을 지정하는 단축 속성으로 선의 두께, 선의 종류, 선의 색상 순으로 적는 것을 권장합니다. 패딩과 마찬가지로 요소의 크기에 영향을 미칩니다.

  • box-sizing
div { box-sizing: border-box;}

요소의 크기 계산 기준을 지정하는 속성입니다. 기본값은 content-box로 요소의 내용으로 크기를 계산합니다. border-box는 요소의 내용, 내부 여백, 테두리선을 포함한 요소의 크기를 계산합니다.

  • overflow
div { overflow: hidden;}

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성으로 visible일 경우 넘친 내용을 그대로 보여주고 hidden일 경우 넘친 내용을 잘라냅니다. auto의 경우 넘친 내용이 있는 경우에만 컨텐츠를 잘라내고 스크로바를 생성한다.

  • display
    요소의 화면 출력 특성에 대한 속성으로 각 요소에 이미 지정되어 있는 값을 쓰는 block, inline, inline-block와 따로 값을 지정해서 사용하는 flex, grid 등이 있습니다.

  • font

div { 
	  font-size: 16px;
	  font-family: Times, 굴림, serif;
	  line-height: 32px;
	}

요소의 글꼴을 정의하는 속성으로 글자의 기울기를 정하는 font-style, 글자의 두께를 정하는 font-weight, 글자의 크기를 정하는 font-size 속성, 서체를 지정하는 font-family 등이 있습니다. 또한 line-heignt 속성을 통해 한 줄의 높이를 지정할 수도 있습니다.

  • 문자
div {
	color : red;
    text-align: center;
 }

문자를 제어하는 속성에는 글자의 색상을 지정하는 color, 문자의 정렬 방식을 지정하는 text-align, 문자에 선을 추가하는 text-decoration, 문자의 들여쓰기나 내어쓰기를 할 수 있는 text-indent이 있습니다.

  • background
div { 
	  background-image: url(./images/cat.png)
	  background-size: 100px;
      background-repeat: repeat-x;
}

요소의 배경 색상을 지정하는 background-color, 요소의 배경 이미지를 삽입하는 background-image, 요소의 배경 이미지 반복 여부를 지정하는 background-repeat, 요소의 배경 이미지 위치를 지정하는 background-position, 요소의 배경 이미지 크기를 지정하는 background-size 등이 있습니다.

  • position
    div {
   position : relative;
   top: 50px;
   left: 100px;
}
    요소의 위치를 지정하는 속성으로 요소 자신을 기준으로 하는 relative, 위치 상 부모 요소를 기준으로 하는 absolute, 뷰포트를 기준으로 하는 fixed를 값으로 가집니다. top, bottom, left, right 속성을 통해 요소의 각 방향별 거리를 지정합니다. z-index 속성을 통해 요소가 쌓이는 순서를 지정할 수 있습니다. z-index를 사용할 때는 되도록이면 숫자 1부터 시작해 숫자가 너무 커지지 않도록 주의해야 합니다. position:absolute와 position:fixed는 display:block 속성을 지니고 있어 인라인 요소에 position 속성을 통해 너비값을 변경할 수 있습니다.
  • flex
div {
	display : flex;
    justify-content: center;
    align-items: center;
 }

박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 기본적으로 행(가로)방향으로 요소들을 정렬합니다. flex는 container와 items에 적용하는 속성이 구분됩니다.

container는 flex-direction을 통해 주 축을, flex-wrap를 통해 item들에 대한 줄바꿈을 여부를, justify-content를 통해 주 축의 정렬 방법을, align-items를 통해 수직 축의 정렬 방법을 설정합니다.
items에는 order를 통해 item의 정렬 순서를, flex-grow를 통해 증가 너비 비율을, flex-shrink를 통해 감소 너비 비율을, flex-basis를 통해 기본 너비를 지정할 수 있습니다.

  • transition
div {
	transition :
    width .5s,
    background-color 2s
   }

요소의 전환(시작과 끝)효과를 지정하는 단축 속성으로 지속시간, 타이밍 함수, 대기시간 등을 설정할 수 있습니다.

transition의 경우 전환 효과의 타이밍 함수를 지정할 수도 있는데 링크텍스트 에서 다양한 효과를 확인해 볼 수 있습니다.

  • transform
    요소의 변환 효과를 지정하는 함수로 원근법, 이동, 키그, 회전 등 다양한 변환 효과를 지정할 수 있습니다. 띄어쓰기로 구분을 해 여러가지 값들을 적용합니다.
profile
원지

0개의 댓글