[T.I.L] Wecode 1일차 (2021.08.02)

Jungsoo kim·2021년 8월 3일

CSS WeCode html

wecode

목록 보기

4/30

21년 8월 2일(월) 드디어 Wecode Bootcamp를 시작하게 되었다.
지금까지 사전 스터디를 하면서 블로그 정리를 잘 하지 못했기 때문에, 비록 늦었지만 지금 부터라도 자주 글을 남기려고 한다.

사실 첫 날은 카드 발급 부터 시작하는 기본적인 Orientation이 주를 이뤘고 실제로 학습은 개인적으로 진행하였기 때문에 양이 많지는 않았다.

<목차>
1. HTML tags & Attributes
2. CSS font style & Text style
3. Margin & Padding
4. Border
5. 마무리 글

1. Tags & Attributes

1) Tag

HTML에서는 이미지나 텍스트를 입력하려면 그에 맞는 태그가 필요하다. 일종의 프로그래밍 언어 문법 이라고 보면 될 것 같다.

<예시>

<p></p>
<h1></h1>
<h2></h2>
<a></a>

중요한 것은 태그가 시작을 하게되면 반드시 끝나는 태그가 매칭이 되게 끔 있어야 한다는 것이다. 그렇지 않으면 작동하지 않는다.

그러나, 일부 태그들은 시작과 동시에 종료가 되기도 하는데 이에 해당하는 태그의 종류는 아래와 같다.

<img>
<br>

참고로 HTML에 있는 태그를 알기 위해서는 아래 링크로 접속하면 된다.
https://www.w3schools.com/tags/tag_a.asp

2) Attributes

HTML에는 각 Tag별로 사용할 수 있는 Attruibutes(속성)이 정해져 있으며 class, href, src, alt 등의 속성이 있다.

참고로 HTML에 있는 속성을 알기 위해서는 아래 링크로 접속하면 된다.
https://www.w3schools.com/html/html_attributes.asp

2. CSS font style & Text style

1) font style

font style에 관련된 속성은 아래와 같다.

font family
여러개의 font style을 한 번에 지정하여 지원해 주지 않는 폰트가 포함되어 있을 경우 지정된 순서대로 글자 폰트를 변경하여 준다.

<예시>
#title {
font-family: Georgia, "Times New Roman", Times, serif;}

브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용 Georgia 폰트가 지원되지 않으면, "Times New Roman"을 적용, 이것도 지원되지 않으면 Times을 적용, 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻이다.
font-size
글씨의 크기를 변경할 때 사용하는 프로퍼티
font-weight
글씨의 두께 조절하는 프로퍼티
font-color
글씨의 색을 변경하는 프로퍼티

참고로, 색을 표현하는 방식은 아래와 같이 3 가지가 있으며

hex 색상코드: 여섯자리로 표현 - #eb4639
rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57),
hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%)

원하는 색을 찾아야 할 경우 구글에서 "color picker"라고 치거나, "color picker hex color"등의 키워드로 검색하면, 내가 원하는 색상을 뽑아주는 여러 앱들이 있다.

2) Text-style

text-align
텍스트를 정렬해주는 프로퍼티이며, 값은 left, center, right를 갖는다.
text-indent
텍스트를 들여쓰기 해야할 때 사용하는 프로퍼티 이며 아래 예시 참고하기 바람.

<예시>
.js-description {text-indent: 50px;}
참고로, 문장 사이사이에 공백을 넣고 싶으면, 를 넣어주면 됨.

3. Margin & Padding

Margine과 Padding은 요소에 여백을 스타일 할 수 있는 프로퍼티 이다.

위 사진을 보면 Margin, border, padding이 잘 정리되어 있다. 참고를 해야할 점은 요소의 크기가 273 x 90으로 되어 있는데 여기서 273은 padding의 값과 border의 값이 포함된 것이다. 즉, 순소 요소의 가로 값은 163이다. Margin까지 포함하는 전체 요소의 크기는 273에 100을 더한 373이 된다.

Margin이나 Padding을 표현하는 방식은 아래와 같이 세 가지 방법있다.
두 번째 방식의 경우 좌에서 우로 순서대로 위, 오른쪽, 아래, 왼쪽의 Margine 값을 나타낸다.

p.example {
  margin: 50px;
}
  
p.example {
  margin: 50px 50px 50px 50px;
}

p.example {
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
}

4. Border

border 프로퍼티는 테두리 스타일 입니다. 예시 코드는 아래와 같습니다.
<예시>

p {
  border: 5px solid red;
}

span {
  border: 1px dotted #0000ff;
}

보통은 두께, 선스타일, 선색깔 순으로 표시해 준다. (반드시 이렇게 해야 하는 건 아니나 국제 약속 같은 느낌)

덧붙여, 인용문을 넣기 위한 프로퍼티가 있는데, 바로 blockquote 이다.

마지막으로, 요소에 밑줄을 쳐주는 속성은 따로 존재하지만, 밑줄의 두께나 색깔 등을 원하는 대로 커스터마이징 하기가 힘들다.
이에 따라, border-bottom을 사용하여 원하는 대로 디자인하여 요소에 밑줄 친 것을 표현하곤 한다.

<예시>

div {
  margin-bottom: 20px;
  border-bottom: 2px solid black;
  padding-left: 20px;
}

이에 따른 결과는 아래와 같다.

5. 마무리 글

프로그래밍을 배울 때 있어서 가장 쉽고 간편하다는 HTML을 배우고 있음에도 불구하고 시간이 꽤 많이 걸리는 것 같다. 성격상 왠만하면 완벽하게 이해 하고 넘어가는 걸 좋아해서 그런 것 같다. 그럼에도 불구하고 분명 까먹는게 많이 생기겠지... 그래도 잘 하는 것 중에 하나가 메모장에 공부하는 걸 내 스타일대로 정리해 놓는 것 인것 같다. 얼마나 볼진 모르겠지만...
아직 많이 부족하지만 포기하지 않고 하다보면 언젠간 나아질 거라 생각하고 꾸준히 해야겠다.