[HoC] 네 번째 워크샵 - HTML & CSS

Let's TECH🧐·2019년 11월 13일

Hacker on Campus

일시: 4주차 [2019.11.12.화]
장소: 성신여대
인원: 6명

0. 3주차 복습

3주차에 걸쳐 JavaScript의 기초에 대해 알아보았다.
4주차부터 진행되는 HTML과 CSS에 대한 세션을 들어가기 전에 JavaScript 기초의 마지막 주차였던 3주차에는 어떤 내용들을 배웠는지 간단히 짚고 넘어갔다. 지난 주에는 문자열, 배열, 숫자에 대해 다루며 각각에 해당하는 여러 메소드들과 그 기능에 대해 자세히 알아보는 시간을 가졌다. 지난 주에 결석하신 분들이 두 분 정도 계셔서 3주차 스터디 자료를 단톡에 올려드릴테니 스스로 공부하는 시간을 가졌으면 좋겠다고 말씀드린 후 4주차 수업을 진행하였다.

1. HTML과 CSS

4주차 스터디에서는 HTML과 CSS에 대해 알아보았다.

HTML의 정의

HTML이란?
HTML은 웹 페이지의 틀을 만드는 마크업 언어이다.
HTML은 어떻게 사용할까?
HTML은 tag들의 집합이다. tag는 부등호로 묶인 HTML의 기본 구성요소를 말한다. HTML은 이러한 tag를 이용해 사용할 수 있다.

HTML에서 가장 많이 사용되는 tag

1. div vs span
div 태그는 한 줄을 차지한다.
반면, span 태그는 컨텐츠 크기만큼의 공간을 차지한다.

<div>hello</div>
<span>hello</span>

2. img
이미지 태그는 이미지를 삽입하는 기능을 한다.
또한, 닫는 태그를 붙여주지 않는다.

<img src="   ">

따옴표 사이에 이미지 주소를 넣어주면 된다.

3. a
a 태그는 링크를 삽입하는 기능을 한다.

<a href="https://www.google.com" target="_blank">구글</a>

이렇게 하면 '구글'이라는 글자에 링크가 삽입되어 '구글'을 클릭하면 새로운 탭에서 https://www.google.com 로 넘어가는 것을 확인할 수 있다.

4. ul, ol, li
이 태그들은 리스트를 만든다.

ul: unordered list로, 순서가 정해지지 않은 리스트를 말한다.
ol: ordered list로, 순서가 정해진 리스트를 말한다.
li: list

<ul>
	<li>리스트 1</li>
    <li>리스트 2</li>
	<li>리스트 3</li>
      <ul>
        <li>리스트 3-1
      </ul>
	</li>
</ul>
<ol>
	<li>리스트 1</li>
    <li>리스트 2</li>
    <li>리스트 3</li>
</ol>

5. input, textarea
input과 textarea는 입력 폼을 만드는 기능을 한다.

input
- text: 텍스트를 입력할 수 있다.
```
```html
```
``` - radio: 중복체크가 불가능한 선택지를 나타낸다. ```html a b c ``` - checkbox: 중복체크가 가능한 선택지를 나타낸다. ```html checked unchecked ```
textarea: 여러 줄의 문자열을 입력할 수 있다.

<textarea placeholder="입력하세요"></textarea>

6. button
버튼을 만드는 기능을 한다.

<button>버튼</button>

JavaScript를 HTML에서 사용하는 방법

1. HTML 내부에 작성

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<script type="text/javascript">
          	console.log("write down");
		</script>
	</body>
</html>

2. HTML 외부에 작성
index.html

<script src="main.js"></script>

main.js

console.log("write down");

CSS의 정의

CSS란?
CSS는 웹페이지 구성 요소의 스타일을 정의하는 언어이다.
CSS 선택자
CSS에서 요소(element)를 선택하는 규칙

1. id: 각각의 element에 고유한 id를 부여

id 속성 이용

#을 이용해 id를 선택
index.html

<h1 id="hello">Hello</h1>
<h1 id="world">World</h2>

style.css

#hello {
	color: red;
}
#world {
	color: blue;
}

2. class

class 속성 이용

.을 이용해 class를 선택
index.html

<h1 class="red">Hello</h1>
<h1 class="blue">World</h2>

style.css

.red {
	color: red;
}
.blue {
	color: blue;
}

CSS는 어떻게 사용할까?

아래의 속성들에 대해서는 팀원들이 조사해온 것을 바탕으로 함께 각각의 스타일을 배워보는 방식으로 진행하였다.
1. width, height
2. border
3. margin, padding
4. background
5. text-align
6. float

CSS를 HTML에 적용하는 방법

1. inline
HTML의 특정 태그에 직접 style을 적용하는 방법

<h1 style="color: lightblue; font-size: 50px">Hello World</h1>

2. HTML 내부에 stylesheet 작성

<!DOCTYPE html>
<html>
	<head>
      	<title>Document</title>
      	<style>
          	h1 {
          		color: lightblue;
          		font-size: 50px
          	}
      	</style>
	</head>
</html>

3. HTML 외부에 stylesheet 작성
index.html

<head>
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

style.css

h1 {
 	color: lightblue;
  	font-size: 50px
}

2. 질의응답

이번 주에는 따로 질의응답 시간을 가지지 않고, 실습을 하면서 질문을 받는 방식으로 진행하였다.
그리고 오늘 배운 내용들이 크게 어려운 내용은 아니라서 다들 무리없이 잘 따라오셨다.
다만, CSS 선택자 사용법을 조금 헷갈려하시는 것 같아서 그 부분에 대해 추가 설명을 덧붙였다.
HTML과 CSS를 연결해주기 위해 CSS 선택자를 사용하는데, 이 때 id 또는 class를 이용해 HTML 태그들에 이름을 붙여줄 수 있고 CSS에서는 #을 이용해 id로 이름 붙인 element를 가져오고, .을 이용해 class로 이름 붙인 element를 가져올 수 있다고 말씀드렸다.

3. 마무리

4주차부터는 HTML과 CSS를 이용해 간단한 기능이 들어간 웹 사이트를 만들어보려 한다.
그래서 이번 주차에는 HTML과 CSS에 대한 내용으로 워크샵을 진행하였다. 저번 주차와 비슷한 방식으로 수업 내용의 일부분을 팀원들에게 나눠주면 각자 자신이 맡은 부분을 조사해와서 스터디 시간에 다른 팀원들에게 설명해주는 식으로 워크샵을 진행하였다. 이렇게 모든 팀원들이 참여할 수 있게 스터디를 진행하면 워크샵 시간이 더 길어질 때도 있고 중간 중간 흐름이 끊길 때도 있다. 하지만 이 스터디에서 가장 중요한 부분은 스터디원분들이 흥미를 잃지 않고 많이 배워갈 수 있도록 하는 것이니까, 다른 단점들이 있더라도 꾸준히 이러한 방식으로 스터디를 진행해야겠다고👍