[HTML, CSS] 기초

Nakjoo·2022년 12월 16일
CSShtml
0

[SEB_BE_43]

목록 보기
1/29

HTML

HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어이다. (마크업 언어 : 태그 등을 이용해 문서나 데이터의 구조를 명기하는 언어)
HTML은 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어이다.

1. HTML의 기본 구조와 문법

  • HTML은 tag들의 집합
  • Tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소
<!DOCTYPE html>
<html>
<head>
	<title>Page title</title>
</head>
<body>
	<h1>Hello world</h1>
    <div>Contents here
    	<span>Here too!</span>
    </div>
</body>
</html>
  • html 확장자 사용

2. 자주 사용하는 HTML 요소

  • div : 한 줄을 차지

  • span : 컨텐츠의 크기만큼 공간 차지

  • img : 이미지 삽입

  • a : 링크 삽입
    코드스테이츠

  • ul, li : 리스트

    • html
    • css

  • input : 다양한 입력 폼
    - text : 텍스트
    - password : 비밀번호
    - radio : 라디오 버튼
    - checkbox : 체크박스 버튼

  • textarea : 줄 바꿈이 되는 텍스트

  • button : 버튼
    ...
    이런 식으로 사용이 가능하다.

CSS

Cascading Style Sheets의 약자로 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다.

CSS를 사용함으로써 더 나은 UX/UI를 제공할 수 있게 된다.

1. CSS 따라하기

기본적인 CSS 사용법을 알아보자.

1.1. CSS 내용 분해하기

CSS의 문법 구성은 다음과 같다.

셀렉터는 특정 태그의 이름, id, 또는 class를 선택한다는 의미를 지니고 있다.
셀렉터로 특정 요소를 선택한 이후에는, 이어지는 선언 블록 안에서 해당 요소에 적용할 내용을 작성할 수 있다. 여기서 요소에 적용할 수 있는 내용을 속성이라 부르고, 속성명(property name)과 속성값(property value)을 사용해 속성을 변경할 수 있다.

그림의 예를 들면, color: red;는 선택한 요소의 글씨색을 빨간색으로 정의하겠다는 의미이다. 속성과 값의 끝에는 세미콜론(;)을 붙여 각 속성의 내용을 구분할 수 있다.

1.2. CSS 파일 추가

CSS 파일을 HTML에 연결하려면 index.css라는 CSS 파일이 있다고 가정하면,

<link rel="stylesheet" href="index.css">

이런 식으로 연결해줄 수 있다.

여기서 <link>태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용한다.
rel속성에는 연결하고자 하는 파일의 역할이나 특징이 나타나고,
href속성에는 파일의 위치를 추가해야한다.

1.3. 기본적인 셀렉터(seletor)

id로 이름 붙여서 스타일링 적용하기

만약 <h4>의 요소에만 색을 바꾸려면 어떻게 해야할까?

h4 {
	color: red;
}

이런 식으로 변경할 수 있다. 하지만 이런 식이면 원하는 곳 말고 전체의 <h4>가 바뀌게 된다. 원하는 곳만 변경하고자 한다면 원하는 요소에 id를 붙이면 된다. id가 있는 요소를 선택할 때는 #기호를 사용한다. id는 하나의 문서에서 한 요소에만 사용이 가능하다.

<h4 id="navigation-title">This is the navigation section.</h4>

h4에 id를 붙이고

#navigation-title {
	color:red;
 }

id로 요소를 선택해 스타일링한다.

class로 스타일 분류해 적용하기

id와 비슷하게 특정 요소에 class를 지정하는 방법도 있다.

이번에는 <li> 요소를 예시를 들어보겠다.

li {
	text-decoration: underline;
}

이런 식으로 li 요소에 밑줄을 쳤다. 하지만 이런 식이면 역시 전체 li 요소에 밑줄이 쳐질 것이다. li도 id를 붙여서 하면 안되냐고 물어본다면, 답은 안된다.
그 이유는 앞서 설명한 것처럼, id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야하기 때문이다. 따라서 아래의 예제는 잘못된 예제이다.

<!-- 잘못된 예제 -->
<ul>
  	<li id="menu-item">Home</li>
    <li id="menu-item">Mac</li>
    <li id="menu-item">iPhone</li>
    <li id="menu-item">iPad</li>
</ul>

이때 우리가 사용할 수 있는 속성이 바로 class이다. 주로 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서 class를 사용한다. class를 사용할 때의 유의할 점은, class를 선택할 때에는 #이 아닌 .을 사용해야한다는 점이다.

<!-- 바른 예제 -->
<ul>
  	<li class="menu-item">Home</li>
    <li class="menu-item">Mac</li>
    <li class="menu-item">iPhone</li>
    <li class="menu-item">iPad</li>
</ul>
.menu-item {
	text-decoration: underline;
}

id와 class의 차이

idclass
#으로 선택.으로 선택
한 문서에 단 하나의 요소에만 적용동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용스타일의 분류에 사용

2. 텍스트 꾸미기

2.1. 색상

글자의 색상을 변경하는 속성은 color이다.

.red {
	color: #ff0000;
}

배경 색상이나, 이후에 나올 박스 테두리 색상을 적용할 수도 있다.

.box {
	color: #155724; /* 글자 색상 */
    background-color: #d4edda; /* 배경 색상 */
    border-color: #c3e6cb; /* 테두리 색상 */
}

2.2. 글꼴

글꼴의 속성은 font-family이다.

.emphasize {
	font-family: "SF pro KR", "MalgunGothic", "Verdana";
}

글꼴의 이름은 따옴표를 붙여서 적용할 수 있다.

2.3. 크기

글자의 크기를 변경하기 위해서는 font-size속성을 사용해야 한다.

.title {
	font-size: 24px;
}

2.4. 기타 스타일링

  • 굵기 : font-weight
  • 밑줄 : text-decoration
  • 자간 : letter-spacing
  • 행간 : line-height

2.5. 정렬

가로로 정렬할 경우 text-align을 사용한다. 유효한 값으로 left, right, center, justify(양쪽 정렬)가 있다.

세로 정렬은 vertical-align을 사용하면 되지만, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 한다.

3. 박스 모델

하나의 웹 페이지 내의 모든 컨텐츠는 고유 영역을 가진다. 그 영역은 항상 직사각형으로 이루어져 있기 때문에, 박스(box)라고 부른다. 박스는 높이와 넓이, 테두리와 여백 등 다양한 속성을 가진다.

3.1 줄바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline, inline-block)

blockinline-blockinline
한 줄 차지OXX
기본적으로 갖는 너비(width)100%글자가 차지하는 만큼글자가 차지하는 만큼
width, height 사용 가능 여부가능가능불가능

4. 박스의 구성 요소

CSS 박스 모델은 다음 그림만 기억하면 된다.

4.1. border(테두리)

각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들며서 그 크기를 시각적으로 확인할 수 있도록 만든다.

p {
	border: 1px solid red;
}

p 태그에 1px의 빨간색 실선을 추가하는 코드이다.

border 속성에 적용된 각각의 값은 테두리 두께(border-witdh), 테두리 스타일(border-style), 테두리 색상(border-color)이다.

4.2. margin(바깥 여백)

각각의 값은 top, right, bottom, left로 시계방향이다.

p {
	margin: 10px, 20px, 30px, 40px;
}

값을 생략하면 생략된 값이 마주보고 있는 방향의 값으로 자동으로 지정되고, 값을 하나만 넣으면 모든 방향의 바깥 여백에 적용된다.

4.3. padding(안쪽 여백)

padding은 border를 기준으로 박스 내부의 여백을 지정한다. 값의 순서에 따른 방향은 margin과 동일하다.

p {
	padding: 10px, 20px, 30px, 40px;
}
profile
Nakjoo
다음 포스트

[Linux] 기초

0개의 댓글