DevLog__[HTML&CSS: 기본 태그와 css selector]

Jaewon Lee·2020년 9월 26일

HTML&CSS

목록 보기

1/9

# Intro

일주일 중 5일을 달리다가 오늘은 바깥 공기도 마실 겸! 카페를 왔다. 카페와서 하는 블로그는 여유롭고 좋다. 하하. 벌써 블로그도 할 일이 아닌 나의 생활에 일부가...?ㅋㅋㅋ블로깅을 하면서 몇 가지 뿌듯했던 경험들이 지속적으로 글을 남기는 원동력이 되는 것 같다. 역시 사람들과 같이 할 때 더 빛이 발하는 나의 시너지....죄송합니다..블로그를 주로 저녁, 새벽에 쓰다보니 머리가 이상하다. 기부니가 기부니한 기념으로다가 또 열심히 써보자~

# html & css

드디어 html!! 비교적 쉽다. 는 구라다. html의 목적은 분명히 알았으나 구조 잡는게 막 쉽고 그렇지가 않다. 그리고 나만 그렇게 느끼는건지...html과 css는 선택의 폭이 너무 넓다!!!! 이게 제일 화딱지나고 알보칠로 가글하는 기분임.

뭐 아무튼, 웹 어플리케이션을 만들기 위해서는 html로 구조를 잡고, css로 구조를 이쁘게 만들어준다.

대략 나름의 역할은 알았으나, 두 가지를 가지고 개발을 해보면 정답이 없는 기분이다. 한가지를 수행하려 하면 선택지가 너무 많기 때문이다. 때문에 트렌드를 잘 따라가야하나? 라는 생각도 들지만 트렌드를 어케 아냐고요!!!! 하지만 물러날 내가 아니다. 트렌디 하면 또 나 아니겠나ㅋ 열심히 따라가보자.

(아래와 같은 목표를 이번 블로깅에 업로드하지는 않겠지만, 두고두고 보면서 익히도록 하자!)
html & css part. 목표.
1. HTML 구조를 programmable하게 기획.
2. CSS를 HTML에 적용.
3. w3school 등의 reference 사이트를 이용해 CSS 속성을 검색하고 이용.
4. 기초적인 selector 규칙을 이해
5. CSS를 이용해 레이아웃 만들기
6. element에 class를 사용해야 할 때와 id를 사용해야 할 때를 구분

인생은 마라톤. 가즈아!!!!!!!!!!!!!!!!!!!🔥

1. HTML

HTML이란?

HTML의 구조를 잘 설계해 놓아야, 이후에 자바스크립트로 개발할 때에 더욱 직관적인 코드를 짤 수 있다.

HTML은 Markup, 구조를 표헌하는 언어

HTML은 기본적으로 Tag들의 집합 (Tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소)

HTML의 기본 구조는 Tree 구조 (Html -> head(-> title), body (-> h1, div, span 등등등)

HTML TAG

<div> : div 태그 사이의 컨텐츠가 한줄을 전부 차지함.

<span> : span 태그 사이의 컨텐츠 크기 만큼 공간을 차지한다.

<img> : src 속성을 통해 이미지 경로 설정. 이미지를 웹 상에 출력한다.

<a> : href 속성으로 이동할 사이트의 url을 명시한다.

<ul>, <ol>, <li> : ul은 순서가 없는 리스트를 출력하고, ol은 순사가 있는 리스트를 출력한다. li는 방금 말했던 두가지 자식으로 들어가여 리스트의 아이템을 출력한다.

<textarea> : 글을 길게 쓸 수 있는 컨텐츠를 제공한다.

<input> : 입력이 가능한 여러 type의 콘텐츠를 담고 있다.

<script> : html 내부에 자바스크립트 코드 작성

<table>, <thead>, <tbody>, <tr>, <th>, <td> : 테이블을 만들어서 구역을 나눔. 왼쪽에서 오른쪽으로 갈수록 태그가 차지하는 공간의 크기가 줄어든다.

<select>, <option> : 여러개중에 한개를 선택할 수 있는 컨텐츠를 제공한다.

MDN에서 HTML 태그에 대해 나와있으니 알아서 공부 ㄱㄱ
Self-Closing 하는 Tag 들이 있다. (<img>, <input>, <meta> 등)
위 그림은 빈도 수가 높은 태그들이다. 저 위주로 알아두고, 모르는 것이나 필요한 태그가 생기면 그때 그때 공부해보자!

2. CSS

1) CSS가 뭐하는거지?

Cascading Style Sheet의 약자. 웹페이지 구성 요소의 스타일을 정의하는 단어

2) HTML, CSS 뭐가 다르지?

HTML

로고, 검색창, 버튼이 중앙에 위치하고 그 외에 기능이 우측 상단에 위치하는 등 웹페이지의 요소들을 구성하는 역할 (구조를 잡는다/ 프레임을 구성한다 등등등)

CSS

로고의 크기, 검색창의 너비, 버튼의 크기, 구성요소를 어디에 위치시킬지 설정하는 역할

🔥CSS는 HTML로 만들어진 웹을 꾸며주는 역할을 한다!🔥

3) CSS를 HTML에 적용하는 방법

Inline에 작성

html 태그에 직접 style을 적용한다.

ex.
<h1 style=“color: red; font-style : Italic”>Hello world</h1>

HTML 내부에 작성

<style> 태그 사용

보통 <head> 태그 안에 삽입

태그를 선택하는 규칙(Selector)에 따라 일괄 적용
<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
    <style>
      h1 {
      	color: red;
      	font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>Hello world</h1>
    <div>Contents here
      <span>Here too!</span>
    </div>
  </body>
</html>
위에 코드에서 Hello world는 웹 상에서 italic체의 빨간색 글씨로 보일 것이다.

HTML 외부에 작성

<link> 태그 사용
CSS 확장자로 저장된 style sheets 파일을 href 속성을 이용해 삽입

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
    <link rel="stylesheet" type="text/css" href="myFirstStyle.css" />
  </head>
  <body>
    <h1>Hello world</h1>
    <div>Contents here
      <span>Here too!</span>
    </div>
  </body>
</html>

<!DOCTYPE html>
<!--myFirstStyle.css-->
h1 { color: red }

3) Selector

selector 란?
css에서 요소를 선택하는 규칙

태그라는 용어는 시작 및 종료 태그와 같이 마크업(Markup)을 의미하며, 요소는 의미를 갖는 하나의 구조를 의미합니다.

이게 무슨 말이냐...하면 selector로 tag에 역할을 부여하는 것이다. 혹은 어떤 행위를 하는 구역인지에 대한 정의를 지어주는 것이다. 예를 들어, 댓글 창에서 쓰는 곳과, 읽는 곳이 있다고 생각하자. HTML 코드 내에서 그냥 div로 쓰는 곳과 읽는 곳을 나누어 주면, 딱 봤을 때 이곳이 무엇을 하는 곳인지 잘 모를 것이다. selector를 사용해서 이 곳이 어떤 곳인지 이름을 정의해 주고, 정의 해준 이름을 통해서 쓰는 곳, 읽는 곳에 한번에 접근이 가능하다. 이는 후에 DOM을 통해서 효율적인 작업을 가능하게 한다!
css는 기본적으로 style태그 안에 효과를 적용하고 싶은 태그에 대해 작성하여, 이를 html document에 반영한다. 만일 다음과 같이 h1 태그안에 text들을 각각 다른 효과를 주고 싶다면 어떻게 해야할까?

<!DOCTYPE html>
<html>
 <head>
   <title>Page title</title>
   <link> rel=“stylesheet” type=“text/css” href=“myFirstStyle.css” />
 </head>
 <body>
   <h1>Hello world</h1>
   <h1>Lee jaewon</h1>
 </body>
</html>

h1 {color : red}

solution.1.

각각의 Element에 고유한 ID를 부여하고, #(identifier)을 이용해 고유한 id를 선택

html문서내에서 단 1개의 element에 부여 가능


<h1 id=“hello”>Hello world</h1>
<h1 id=“Lee jaewon”>Lee jaewon</h1>


#hello { color: red; }
#Lee jaewon { color: blue; }
solution.2.

.(dot)을 이용해서, 효과를 적용하길 원하는 tag에 class로 지정한다.

여러 tag에 class를 부여할 수 있으며, 한 tag에 여러 class 적용도 가능하다.

공백을 이용해서, 한 element에 여러 class를 지정할 수 있다.

반복적으로 같은 형태가 나올 때 class를 사용하면 편리하다.
ex.


<h1 class=“red underline”>Hello world</h1>
<h1 class=“blue”>Lee jaewon</h1>


.red { color: red; }
.blue { color: blue; }
.underline { text-decoration: underline; }

3. HTML과 CSS에 대해 더 알아야 할 것

왜 <b>, <font>, <center> 등의 태그를 권장하지 않는지
CSS를 이용한 레이아웃 구성 : box model, positioning, z-index/float, flex box, grid 등은 실습을 통해 학습하도록 하자!

# Work Off

처음에 HTML과 CSS는 정답이 없는 듯한 기분이 든다고 얘기를 했었는데, 글을 쓰면서 그 문제가 명확해졌다. 바로 레이아웃을 어떻게 잡아야 할지 감이 안온다는 것! 레이아웃을 잡는 방법이 너무 많다!!

레이아웃을 잡으면 그 이후에는 필요한 요소들로 채워 나갈텐데, 처음부터 벽에 막힌 느낌인거다!! 기업에서 프로젝트를 진행하면 웹의 구조를 어떤 방법으로 잡을지 엄청나게 궁금해졌다. 프론트 사이드는 트렌드를 잘 쫓아가는 능력이 필요하다고 들었는데, 어떻게 하면 그 트렌드를 알고 쫓아갈 수 있을까?

내 블로그가 뜨거운블로그였다면 많은 분들이 댓글을 달아주며 도와주셨을 텐데.....😭

그래도 나에겐 구글과 네이버의 서치엔진이 있지 아니한가! 오늘도 정리하면서 성장할 수 있는 무언가를 얻어가는 느낌이다. 하루에 몇시간 못 자는 나날들을 보내고 있지만, 피곤하지 않다. 오히려 가슴속이 뭉클뭉클 거리는 느낌이 들고 재밌어지고 있다. 다음 html, css 포스팅에서는 위에 명시해 놓은 알아야 할 것들에 대해 다뤄보자!