일단 만드는 HTML/CSS by 이두희
코딩의 '코'자도 모르는 초보들이 들으면 좋을 강의이다. 차근차근 쉽게 알려 주시고 코드를 따라서 작성하며 결과물을 만들어가면서 듣는 수업이라 좋다.
HTML/CSS를 배워야 하는 이유
가장 빠르고 간편하고 완벽하고 보편적인 시각화 도구
- 다른 언어와 콜라보레이션이 용이하다. 자바스크립트, 파이썬, 루비 같은 완전히 다른 성격의 언어와도 잘 섞여서 그 언어들이 표현하고 싶은 내용을 대신 표현해주는 좋은 도구이다.
- 결과물이 누구나 접속 가능한 웹 페이지이다.
- 문법과 로직이 간단하다.
HTML과 인사하기 & 문서의 골격
HTML 문서는 여행 짐가방에 비유할 수 있다. 대제목을 tag라고 부른다.
- 골격 설명
<!DOCTYPE html> // 보통 대소문자 구별
<html> // 가장 큰 가방
// head와 body는 그 다음 큰 가방
<head> // 수하물 태그 - 내용물에 대한 추가(부가) 정보
<meta charset="UTF-8"> // html 한글 출력
<title> 탭에 표시되는 부분 </title>
</head>
<body>
// 짐가방 안 - 컨텐츠가 담긴 곳
// h1부터 h6까지
</body>
</html>- 실제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>김멋사의 이력서</title>
</head>
<body>
<h1>김멋사</h1>
<p>HTML/CSS 개발자</p>
</body>
</html>
CSS와 인사하기
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed.
HTML과 CSS는 서로 역할이 다르다. HTML은 문서의 요소요소를 구분하는 역할 및 요소에 의미를 부여하는 역할을 한다. 그리고 HTML의 모든 기능은 태그형태로 들어간다. CSS는 화면 적절한 위치에 표현하는 역할을 담당한다. 서로 다른 언어이므로 파일을 각각 만들어야 해서 연결해 줘야 한다. HTML에 footer 내용을 적고 CSS로 footer를 꾸며보자.
- 골격 설명
<!DOCTYPE html> 보통 대소문자 구별
<html> 가장 큰 가방
head와 body는 그 다음 큰 가방
<head> 수하물 태그 - 컨텐츠 표현을 위한 내용 (부가 정보)
수하물 태그에 출발지/목적지 쓰는 순서는 상관없다.
<meta charset="UTF-8"> - html 한글 출력
메타 태그와 링크 태그는 닫지 않는다. 단일 태그.
<title> 탭에 표시되는 부분 </title>
</head>
<body> 짐가방 안 - 컨텐츠가 담긴 곳
</body>
</html>- 실제 코드 (footer 추가)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>김멋사의 이력서</title>
<link rel="stylesheet" href="codelion.css">
</head>
<body>
<h1>김멋사 </h1>
<p>HTML/CSS 개발자</p>
<footer>copyright CODE LION. All rights reserved.</footer>
</body>
</html>- footer의 CSS 코드
// 순서는 상관없다
footer {
text-aling: center;
background-color: black;
color: white;
}가운데로 정렬하고 글자의 색상은 하양으로 하고 글자 배경색을 검정으로 꾸미는 CSS 코드이다.
가독성 챙기기
CSS를 사용하여 가독성을 높일 수 있다. 글자의 크기나 색상 등을 조절하여 중요한 부분을 강조하는 등의 일을 할 수 있다. 이 때 클래스 선택자를 사용하면 용이하게 할 수 있다. 구문은 .class_name { style properties }로 쓰면 된다. 아래 코드로 확인하자.
- 골격 설명
<!DOCTYPE html> 보통 대소문자 구별
<html> 가장 큰 가방
head와 body는 그 다음 큰 가방
<head> 수하물 태그 - 컨텐츠 표현을 위한 내용 (부가 정보)
수하물 태그에 출발지/목적지 쓰는 순서는 상관없다.
<meta charset="UTF-8"> - html 한글 출력
메타 태그와 링크 태그는 닫지 않는다. 단일 태그.
<title> 탭에 표시되는 부분 </title>
</head>
<body> 짐가방 안 - 컨텐츠가 담긴 곳
<p class="big-font"> 따옴표는 큰/작은 상관없다 </p>
</body>
</html>- 실제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>김멋사의 이력서</title>
<link rel="stylesheet" href="codelion.css">
</head>
<body>
<p class="big-font">내 이름은 김멋사</p>
<p class="small font">코드라이언으로 코딩 배웠지</p>
<p class="small font">반갑습니다</p>
</body>
</html>- CSS 코드
p {
font-size: 30px;
}
.big-font {
font-size: 40px;
}
.small-font {
font-size: 15px;
}위 코드처럼 클래스 선택자를 사용할 수 있다. 여기서 주의해야 할 점이 있다. p는 내장 태그라서 p 앞에 점을 찍지 않고 써도 된다. 하지만 big-font라는 태그는 css 내에 존재하지 않는 태그라서 컴퓨터에게 아무런 의미가 없다. 이렇게 내가 이름을 붙였다면 반드시 점을 찍어야 한다. 점을 찍으면 이제 'big-font'라는 클래스를 꾸며주라는 뜻이 된다.
'프로그래밍' 카테고리의 다른 글
| [코드라이언] HTML/CSS 박스 쪼개기 padding, border, margin (0) | 2023.03.25 |
|---|---|
| [코드라이언] HTML/CSS (2) div 중앙정렬, div와 span의 차이점 (0) | 2023.03.14 |
댓글