2026년 2월 5일 목요일 - 6주차
HTML
HTML 기본
[ttt1.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- header에는 메타데이터와 관련된 태그가 온다.-->
<!-- 원래는 태그는 다 닫아야 하는데 안닫는게 몇개 있음. 몇개 안되니까 외우기-->
</head>
<body>
안녕하세요! 반갑습니다.
<!-- 여기에는 본격적으로 화면에 나타나게 할 코드가 들어간다.-->
</body>
</html>[ttt2.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="https://www.naver.com">안녕하세요</a>
<!-- a: 태그명 그리고 그 안에 콘텐츠가 들어가고 콘텐츠는 여러 속성들이 있다. -->
<!-- a태그는 태그내용(안녕하세요)을 클릭하면 지정된 링크로 이동시키는 기능 -->
<!-- href로 주소를 지정한다. -->
<ol start="1" type="a"> <!-- 시작 값, 출력 타입 지정 가능 -->
<!-- ol: 순서가 있는 목록. li라는 요소(자식)이 있어야 한다. -->
<li>안녕하세요</li>
<li>안녕하세요</li>
<li>안녕하세요</li>
</ol>
<ul>
<!-- ul: 순서가 없는 목록. li라는 요소(자식)이 있어야 한다. -->
<li>반갑습니다</li>
<li>반갑습니다</li>
<li>반갑습니다</li>
</ul>
<h1>Hello World1</h1>
<h2>Hello World2</h2>
<h3>Hello World3</h3>
<h4>Hello World4</h4>
<h5>Hello World5</h5>
<h6>Hello World6</h6>
<!-- 글자 크기 지정, 사실은 제목태그.. 숫자가 작아질수록 글자 크기가 커짐 -->
<!-- h1~h6까지 있긴한데, 사실 h1, h2만 쓰이고 나머지는 잘 안쓰임. -->
<p>단락태그. 다른것보다 margine이 좀 들어가있다.</p>
<img width="300" height="500" src="./speakerImg.jpeg">
<!-- img 태그는 속성이 중요, 이미지를 보이게 하는 태그이다. -->
<!-- width, height 속성: 크기를 조절하는 것 (사실 잘 안쓰임) -->
<!-- width 하나만 크면 크기만 조절. 두개 다 쓰면 사진 찌그러짐 -->
<!-- src 속성: 이미지경로 지정하는 속성. 경로에는 상대, 절대 경로가 있음 -->
<!-- ./ 붙은것이 상대경로. 절대경로는 아직 다루지 않는다. -->
</body>
</html>주로 쓰이는 태그
[ttt3.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
</head>
<body>
<!-- 중요하고 잘 쓰이는 순으로 태그 정리 -->
<!-- 90% 사용. 시맨틱 태그 = div랑 동일한 느낌 -->
<div>아무의미 없는 태그(CSS용). 아무 의미가 없기 때문에 중요하고 자주 쓰인다.</div>
<!-- 레이아웃 잡는데 쓰임. 다른태그는 이미 잡힌게 있어서 CSS 적용이 까다로움 -->
<!-- 5% 사용. -->
<span>이것도 크게 의미없음.. 문자열 컨트롤시 사용</span>
<!-- 사실 CSS 들어가면 div로 모든걸 만들 수 있음 -->
<!-- 나머지 5% 사용되는 태그 -->
<!-- 줄바꿈 -->
<div>
안녕하세요
반갑습니다
잘부탁드립니다.
<!-- 내려서 작성했지만 옆으로 붙어서 나옴. Enter가 의미 없다는 뜻.. -->
<!-- Enter를 이용한 줄바꿈이 안됨. 그래서 필요한 것이 br태그 -->
<!-- br: 줄바꿈 해주는 태그 -->
<!-- 대신, br로 레이아웃 지정하지 말고 문자열 컨트롤할때만 쓸것. -->
안녕하세요<br>
반갑습니다<br>
잘부탁드립니다.
</div>
<!-- a = 링크 -->
<a href="https://www.naver.com">!!야호!!</a>
<!-- 이미지 삽입. 속성으로 이미지 크기 지정하지 말것, 비율 다 깨져버림.. -->
<!-- 크기 조정 필요시에는 꼭 CSS로 할것. -->
<img alt="스피커 제품 사진입니다." title="스피커 사진"
width="300" height="500" src="./speakerImg.jpeg">
<!-- title은 실제로 보이진 않지만 마우스오버 했을때 나오는 문구 -->
<!-- alt는 이미지 설명. 일반적으론 아예 안나오지만 이미지가 깨졌을때 나옴 -->
<!-- 코드 읽으면서 사진 보기 힘드니까 쓰기도 하는데, 사실 그냥 웹 표준이라 씀 -->
<!-- 제목태그 h1~h6 -->
<h1>글씨가 크게 나오게 하는 것.</h1>
<!-- 표 만드는것. 나중엔 사실 table 말고 div로 쓰긴 한다. -->
<!-- border: 표에 테두리 만들어줌 CSS에서 없어진지 꽤 됐지만 쓸수는 있다. -->
<table border="1">
<tr> <!-- 하나의 행 -->
<td>이름</td> <!-- 하나의 열 -->
<td>나이</td>
<td>점수</td>
</tr>
<tr>
<td>민수</td>
<td>23</td>
<td>85</td>
</tr>
<tr>
<td>영수</td>
<td>25</td>
<td>76</td>
</tr>
<tr>
<td>철수</td>
<td>21</td>
<td>38</td>
</tr>
</table>
<ul>
<li>Hello1</li>
<li>Hello2</li>
<li>Hello3</li>
</ul>
<!-- 입력 양식 (Scanner 대신에 쓰는것) -->
아이디: <input type="text" placeholder="아이디 입력"><br>
비번: <input type="password">
<!-- placeholder: 입력 전 힌트를 보여주는 것. 텍스트 입력하면 사라짐 -->
<!-- type="password": 입력중인 글씨가 보이지 않게 하는것. -->
성별: <!-- enter쳤지만 한줄로 나옴. 이래서 br이 필요한 것. -->
<input type="radio" name="ge" checked> 남
<!-- 들어가자마자 일단 기본적으로 눌려있는것. 기본값 지정 -->
<input type="radio" name="ge"> 여
<!-- 나중에 백엔드랑 같이 하면 name이 제일 중요. name 붙이면 그룹화됨 -->
<!-- 그룹화 되면 둘중 하나만 선택가능. 안하면 체크박스나 마찬가지... -->
<br> <!-- 사실 이렇게 br 넣으면 안됨. 지금은 레이아웃 안할거니까.. -->
<!-- 체크박스 -->
관심사:
<input type="checkbox"> 야구
<input type="checkbox"> 축구
<input type="checkbox"> 농구
<input type="checkbox"> 당구
<br>
<!-- 날짜선택 박스 -->
생일: <input type="date"><br>
<!-- 참고로 브라우저마다다 다름. 윈도우, 갤럭시, 아이폰 등.. 다 다름 -->
<!-- 선택박스. comboBox라고 불리는 그거. -->
사는 지역:
<select>
<option>-- 선택 안함 --</option>
<option>서울</option>
<option>경기</option>
<option>전라</option>
<option>경상</option>
<option>충청</option>
<option>제주</option>
</select>
<br>
<!-- 콤보박스, 라디오박스, 다 결국 비슷한것인데 다른 점. UX때문이다 -->
<!-- 보통 콤보박스는 내용이 많을때 쓰이고 체크박스는 양이 적을때 쓰임 -->
<!-- 파일 선택 -->
이력서: <input type="file"><br>
<!-- 여러줄 텍스트 입력-->
하고싶은 말: <br> <!-- 여기선 아래로 내려가 있어야 하니까 필수 느낌 -->
<textarea></textarea> <br>
<!-- 특수 문자 <> 와 같이 문법에 사용되는 문자를 그대로 표현하고 싶을때 -->
<!-- 다양하기 때문에 검색해서 쓰기 -->
<div>안녕하세요 <환영>합니다.</div>
<div>띄어쓰기 여러번 하고싶은데 한개만 인식됨.</div>
<div> 그래서 이렇게 해야 제대로 띄어진다.</div>
</body>
</html>CSS
css 기본 문법
CSS는 보통 HTML 문서의 head 태그 내부에서 style 태그를 열어 작성하며, HTML과는 다른 문법을 사용한다.
CSS를 적용하기 위해 HTML 태그에 id를 부여하고, CSS에서는 # 기호를 사용하는 id 선택자를 통해 해당 태그를 지정한다. id는 절대로 중복시켜서는 안되고 하나의 속성을 여러개의 태그에 중복적용 하고싶으면 태그를 클래스로 묶어서 해당 클래스를 선택하여 CSS를 적용 할 수 있는데, 이때 클래스 선택자의 기호는 "."이다.
선택자 뒤에 중괄호 {}를 열고, 그 안에 스타일 속성과 값을 정의함으로써 디자인을 적용한다.
이때 HTML 태그 하나하나는 하나의 요소(element)가 되며, CSS는 이러한 요소를 선택하여 스타일을 지정하는 방식으로 동작한다.
CSS 기본 예시
[css1.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/* 여기는 css 문법을 따름. 문법이 바뀜 */
#qwer1 {
color: red;
font-size: 32px;
}
#qwer2 {
color: yellow;
font-size: 24px;
}
.yyy {
color: blue;
font-weight: bold;
}
/* 위에 2개면 충분하긴 하다 */
* {
color: green;
}
div {
color: aqua;
}
</style>
</head>
<body>
<ul>
<li id="qwer1">안녕하세요</li>
<!-- 변수 이름 짓는 느낌. 모든 태그에 다 넣을 수 있다. -->
<li id="qwer1" class="yyy">안녕하세요</li>
<!-- 이렇게 id와 class 중복 속성을 지정할때는 표현범위가 더 좁은것이 적용됨.
즉, id가 먼저 -->
<li>안녕하세요</li>
<li>안녕하세요</li>
<li id="qwer2">안녕하세요</li>
<!-- id 중복 선언&적용이 가능하기는 한데... 절대로 해서는 안됨.
id는 태그식별을 위해 사용하는데, 이러면 각 태그를 식별할 수 없기 때문에.. -->
<!-- 원래 문법 오류 수준인데 웹브라우저가 봐주는 느낌.. -->
</ul>
<ul>
<li class="yyy">반갑습니다</li>
<li class="yyy">반갑습니다</li>
<li>반갑습니다</li>
<li>반갑습니다</li>
<li>반갑습니다</li>
<!--
같은 스타일을 가지는 태그의 속성을 지정할때 하나의 태그마다 일일히
지정하고 있을순 없으니까 class로 묶어서 한번에 지정한다.
클래스는 하나로 묶는것이기 때문에 명칭을 똑같이 지어도 됨.
-->
</ul>
<div>잘부탁드립니다</div>
<div>잘부탁드립니다</div>
<div>잘부탁드립니다</div>
</body>
</html>CSS 선택자 종류
- # : id
- . : class
- * : 모든 원소를 선택하며, 별도로 CSS가 지정되지 않은 속성에 모두에 적용됨
- 태그 선택자: 태그명 {} 하면 해당 태그 전체가 선택됨
- 태그 선택자 예시div { color: aqua; }
클래스 선택자
[css2.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/* 클래스 선택자 */
/* 이렇게 미리 정의를 해놓고 html 작성할때 사용한다.
참고로 .뒤에 있는게 클래스 이름이고, 이때 -는 빼기(마이너스)가 아니라 하이픈... */
.text-lg {
font-size: 32px;
}
.text-sm {
font-size: 8px;
}
.bold {
font-weight: bold;
}
.text-red {
color: red;
}
.text-blue {
color: blue;
}
</style>
</head>
<body>
<div class="text-blue">안녕하세요</div>
<div>안녕하세요</div>
<div>안녕하세요</div>
<div>안녕하세요</div>
<div class="text-red text-lg bold">안녕하세요</div>
<!-- 이렇게 하나의 앨리먼트에 여러개의 속성을 지정 할 수 있음, 물론 id는 안됨 -->
</body>
</html>CSS 클래스 상속
[css3.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/* 여기는 일단 지금은 이런게 있구나 알아만 두면 됨.. */
ul li {
/* 이러면 ul 안에 있는 모든 li가 선택됨. 범위를 좁힘 */
color: red;
}
ol > li {
/* 이러면 ol 안에 있는 'li'만 선택됨. 범위를 좁힘 */
color: red;
}
.aaa > div .bbb {
/* 이런것도 되기는 함... */
color: blue;
}
li:nth-child(2n-1) {
/* 모르겠음.. 홀수짝수로 하는 것. 2n은 짝수 2n-1은 홀수 */
background-color: aqua;
}
li:hover {
/* 마우스 오버될때의 색 */
background-color: green;
font-size: 20px;
}
</style>
</head>
<body>
<div>!!!야호!!!</div>
<div>!!!야호!!!</div>
<div>!!!야호!!!</div>
<ul>
<li>안녕하세요</li>
<div><li>안녕하세요</li>
<div>
<li>!!!야호!!!</li>
</div>
<li>안녕하세요</li>
<li>안녕하세요</li>
</ul>
<ol>
<li>반갑습니다</li>
<div>
<li>!!!야호!!!</li>
</div>
<li>반갑습니다</li>
<li>반갑습니다</li>
</ol>
</body>
</html>CSS 인라인 속성 지정
- 방법1: head 위에 속성을 지정하는것이 아니라 딱 하나의 html 태그 내부에서 CSS를 적용하는 것. ;으로 여러개 지정 가능하긴 하지만, 그러면 너무 무거워지니까 안하는게 좋음
- 방법2: 공용된 속성을 html 파일마다 매번 만들순 없으니까 아예 css확장자 파일 만들어서 따로 관리하고 import 해서 사용한다. 사실 이게 가장 베스트긴 하다...
[css4.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./common.css">
<!-- 외부 css파일 import하는 구문 -->
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<div class="lg blue">안녕하세요!</div> <!-- 외부 css 사용 -->
<div style="color: red;">안녕하세요!</div>
<div class="blue">안녕하세요!</div>
<div>안녕하세요!</div>
<div>안녕하세요!</div>
</body>
</html>[common.css]
.qwer {
font-size: 20px;
color: red;
}
.lg {
font-size: 32;
}
.sm {
font-size: 8px;
}
.blue {
color: blue;
}HTML 공부법
https://www.w3schools.com/
html 공부 도와주는 사이트이다.
References -> HTML Tags Reference 가서 원하는 태그를 선택하면 정보가 나온다. 실제 써보고싶으면 Try It Yourself를 누르면 테스트가 가능하다.
취업하고싶다...