HTML과 CSS 빠르게 이해하기

Corner·2022년 5월 5일
CSShtml
0

FrontEnd

목록 보기
2/3

HTML과 CSS 빠르게 이해하기

사전 공부

  • HTML, CSS, JS는 각각의 언어 소개

HTML, CSS, Javascript의 역할

웹 서버에서는 HTML, CSS, Javacsript를 넘겨 줍니다.

브라우저가 웹을 보여주기 위해서는 웹 서버로부터 HTML, CSS, Javascript를 다운 받은 후 순서에 맞게 실행시킵니다.

💡 우리가 노트북으로 웹을 개발하는 건 이미 HTML,CSS, JS 파일을 컴퓨터에다 저장한다는 거에요. 그래서 웹 서버가 없어도 웹 개발하는 화면을 볼 수 있죠.

HTML : 텍스트, 이미지, 입력창 등 우리가 웹에서 보는 요소(Element)를 정의할 때 사용합니다.

CSS : HTML에 정의된 요소들에 스타일(색깔, 간격, 크기 등)을 부여합니다.

JS : 버튼을 클릭했을 때, API 서버와 통신할 때 등 모든 동작들을 처리합니다(HTML, CSS는 화면을 구성하는 언어, JS는 동작하는 언어)

  • 본격 수업 전에 브라우저에서 HTML,CSS,JS 해킹해보기

    • 브라우저에서 보여지는 웹은 HTML, CSS, JS로 구성되어 있어요. 그렇기에 우리가 보는 웹의 HTML, CSS, JS를 브라우저에서 확인할 수 있어요!
      1. 크롬 브라우저로 웹을 실행합니다.
      2. 맥 : Cmd + Option + I , 윈도우 Ctrl+ Shift + F12
      3. Elements 탭에서 HTML, CSS를 보고 수정할 수 있어요.
      4. Console 창에서 javascript 코드를 실행하고 결과를 볼 수 있어요!
      5. Network 창에서 브라우저가 네트워크 통신하는 내역들을 볼 수 있어요!

HTML 핵심 익히기

1. HTML 태그 기본 문법

웹의 본질은 결국 정보를 시각적으로 보여주는 것입니다. 이때 HTML 태그는 정보를 보여주는 역할을 합니다. 이미지, 텍스트, 비디오, 입력창 등의 개별 정보는 전부 HTML로 부터 만들어진다고 보시면 됩니다.

위 정보들을 HTML 언어로 표시하기 위해선 태그와 속성 그리고 콘텐츠를 이해하시면 됩니다. 이때 콘텐츠는 태그가 될 수도 있습니다.

  1. 기본 형식 : <태그>콘텐츠</태그>

    <p>Hello Grab</p>

  2. 속성이 있다면 <태그 속성1="값" 속성2="값">콘텐츠</태그>

    <a href="https://www.naver.com">Hello Naver</a>

  3. 태그 안에 또 태그를 넣는다면

    <div>
	<p>Hello everyone!</p>
</div>

  4. 콘텐츠가 따로 없다면 <태그 속성1="값" />

    <br /> 
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg" />

HTML에서 주석을 사용하려면

<!-- 나는 주석이다. 코드에 영향을 끼치지 않지.-->

2. HTML로 웹 기본 구성 짜기

HTML로 웹을 구현하기 위해선 기본적으로 설정하는 태그 형식이 있습니다. 

<html>
    <head>
        <!--화면에 보이는 요소들 외의 모든 것들(메타정보, 탭에 보이는 제목 설정 등)를 담는 공간-->
    </head>
    <body>
        <!-- 화면을 구성하는 요소들을 담는 공간 -->
    </body>
</html>
  • html 태그가 가장 밖에서 사용되며 그 안에 head , body 태그가 사용됩니다.
    • head 태그는 콘텐츠를 보여주는 것 이외의 모든 설정 태그를 넣습니다.
    • body 태그에는 실제로 화면을 구성하는 태그를 넣습니다.
<html>
    <!--화면에 보이는 요소들 외의 모든 것들(메타정보, 탭에 보이는 제목 설정 등)를 담는 공간-->

    <head>
        <!--브라우저 탭에 보이는 제목-->
        <title>쇼핑몰에 오신 것을 환영합니다</title>
				<meta charset="utf-8">
        <!--CSS를 로드하는 태그 : link, style-->
        <!--link : 외부 리소스(CSS, 폰트)등을 외부에서 가져올 때 사용 -->
        <link href="style.css" rel="stylesheet" />

        <!--style : CSS를 html 내부에서 직접 적용할 때 사용 -->
        <style type="text/css">
            html {
                background-color: white;
            }
        </style>

        <!--Javascript를 로드하는 태그 : script-->
        <!--외부에서 파일을 가져오거나 직접 내부에서 입력할 수 있음-->
        <script type="text/javascript" src="script.js" />        
        <script type="text/javascript">
            console.log("코드에 문제있어?");
        </script>
    </head>

    <!-- 화면을 구성하는 요소들을 적는 공간 -->
    <body>

    </body>
</html>

3. HTML 주요 태그들 알아보기

h1,h2,h3,h4,h5,h6

headline의 약자로 일반적으로 제목을 표시할 때 사용하는 태그입니다

  • 줄바꿈 : O
  • 기본 너비 : 부모 너비
<h1>Hello world!</h1>
<h2>Hello world!</h2>
<h3>Hello world!</h3>
<h4>Hello world!</h4>
<h5>Hello world!</h5>
<h6>Hello world!</h6>

p

일반적으로 문단(paragraph)을 나눌 때 사용하는 태그. 일반 텍스트를 표시할 때 주로 사용합니다.

  • 줄바꿈 : O
  • 기본 너비 : 부모 너비

br

줄바꿈을 할 때 사용하는 태그

<br/>

a

다른 링크로 넘어가도록 돕는 태그입니다. 필수 속성으로 href="넘어갈 주소" 를 적어야 합니다.

  • 줄바꿈 : X
  • 기본 너비 : 콘텐츠 너비
<a href="https://www.naver.com">네이버로 넘어가기</a>

img

이미지를 보여주는 태그입니다. 필수 속성으로 src="이미지 주소"를 적어야 합니다. alt 속성은 img가 제대로 보여지지 않았을 때 보여지게 될 문구입니다.

  • 줄바꿈 : X
  • 기본 너비 : 이미지 너비
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg"  alt="구름 사진" />

form , input

form 태그는 내부에 입력하는 값들을 관리해주는 태그입니다. 로그인, 상품 업로드 등 우리가 입력을 해야할 때 form 태그가 사용됩니다.
form의 주요 속성 중 action 은 Submit(제출하기)가 눌렸을 때 입력된 서버 URL로 정보를 전송합니다.

form 태그 안에는 input 태그들이 들어갑니다. type 속성을 통해 text, password, radio, file, submit 등을 넣을 수 있습니다.

label 태그는 input 태그의 라벨을 붙일 때 사용합니다.

<form action="">
	<label>아이디 입력 </label>
	<input type="text" />
	<br/>
	<label>패스워드</label>
	<input type="password" />
	<br/>
	<input type="submit" value="전송" />
</form>

div

영역을 나누도록 도와주는 태그로 앞으로 굉장히 많이 사용하게 됩니다. div를 하나의 박스라고 생각하시면 됩니다. 박스 안에 다른 콘텐츠들을 넣어서 영역을 관리합니다.

  • 줄바꿈 : O
  • 기본 너비 : 부모 너비
<div>
	<p>구름 사진입니다</p>
	<img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg"/>
</div>

span

div 와 함께 CSS를 이용해서 영역을 구성할 때 많이 사용합니다. div와 차이가 있다면 div는 줄바꿈이 되며 기본 너비가 부모의 너비를 차지한다면, span 태그는 줄바꿈이 되지 않고, 자식 콘텐츠의 너비만큼을 차지합니다.

  • 줄바꿈 : X
  • 기본 너비 : 콘텐츠 너비
💡 **저는 보통 텍스트(문장)에 스타일을 씌울 때 span 태그를 사용합니다.** 💡 실제로 태그들의 종류가 훨씬 다양합니다. `시멘틱(Semantic)` 태그라고 해서 용도에 맞는 직관적인 이름을 가진 태그들이 있습니다(article, section, footer 등)

이번 수업에서는 div, span 등 기본 태그를 활용해서 화면을 구성할 계획입니다.

CSS 핵심 익히기

1. CSS 기본 문법

CSS는 밋밋한 HTML 태그에 디자인을 씌워주는 언어입니다. 보통 웹 개발을 할 때 HTML 태그로 요소들을 구현하고 CSS로 디자인을 입히고 배치를 도와줍니다.

선택자 { 
	속성1 : 값;
	속성2 : 값;
}

선택자(Selector)

선택자는 스타일을 적용할 대상입니다. 태그, id, class 등을 선택할 수 있습니다.

/* 태그를 선택자로 했을 때 */
p {
	color: orange;
}

/* 태그를 id로 했을 때 */
#title {
	color: blue;
}

/* 태그를 class로 했을 때 */
.item {
	color: red;
}

태그를 선택자로 하면 모든 태그에 스타일이 적용됩니다.

  • **id는 딱 한 요소에게만 적용됩니다.** 우리의 주민등록번호는 고유한 것처럼 id도 마찬가지로 한 요소에게만 적용됩니다 (태그에 동일한 id를 넣어도 한 개만 적용됨)
  • **class는 class가 적용된 모든 요소에게 적용됩니다.** 상품리스트에서 상품의 디자인이 다 동일한 것은 class를 부여해줬기에 가능한 일입니다.
<html>
    <head>
        <style>
            /* p 태그를 선택자로 한 경우 : 모든 p 태그에 스타일이 적용됨*/
            p {
                color: orange;
            }
            /* id를 선택자로 한 경우 : 'id-test'를 id로 가지는 한 요소에게만 적용됨*/
            #id-test {
                color: blue;
            }
            /* class를 선택자로 한 경우 : 'class-test'를 class로 가지는 한 요소에게만 적용됨*/
            .class-test {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>Hello Grab</p>
        <p>Hello Everyone</p>
        <div id="id-test">id가 적용된다.</div>
        <div class="class-test">클래스가 적용된다.</div>
        <div class="class-test">클래스가 적용된다.</div>
    </body>
</html>

선택자 조합

선택자 여럿을 ,로 묶어서 같은 속성을 적용해줄 수 있습니다.

#item1, #item2 {
	background-color : red;
}

복합 선택자

태그, id, class가 기본 선택자라고 한다면 이들을 결합한 선택자를 복합 선택자라고 합니다.

우리가 많이 사용하게 되는 복합 선택자로 **하위 선택자(Descendant Selector) 와 자식 선택자(child selector)** 가 있습니다.

  1. 하위 선택자는 **선택자a 선택자b** 로 띄어쓰기를 해주면 됩니다. 하위 선택자는 상위 선택자(선택자a) 내부에 있는 모든 요소들 중에서 선택자2에 해당하는 태그를 선택합니다.
  2. 자식 선택자는 **선택자a > 선택자b**로 >를 통해서 구분해줍니다. 자식 선택자는 상위 선택자(선택자 a)의 내부에서 가장 바깥에 있는 태그들 중에서 선택자2에 해당하는 태그를 선택합니다.

하위 선택자는 자식 선택자를 포함하는 넓은 선택자인 것을 알 수 있죠?

💡 제가 앞으로 언급하는 `상위 선택자`는 특정 선택자를 기준으로 바깥, 즉 상위에 있는 선택자를 칭한다고 보시면 됩니다. 
<html>
    <head>
        <style>
						/* 하위 선택자 */
            #item-list p {
                color: blue;
            }
						
						/* 자식 선택자 */
            #item-list > p {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="item-list">
            <p>자식 아이템1</p>
            <p>자식 아이템2</p>
            <div>
                <p>하위 아이템1</p>
                <p>하위 아이템2</p>
            </div>
        </div>
    </body>
</html>

2. CSS 에서 자주 쓰이는 속성들

속성과 **값**을 통해서 실질적으로 디자인을 씌운다고 보면 됩니다. 여기서는 필수적으로 알아둬야 할 속성들을 다룹니다. 추가적으로 다룰 속성은 강의에서 다뤄집니다.

[기본 코드]

<html>
  <head>
    <style type="text/css">
				/*이 곳에 CSS를 작성합니다.*/
		</style>
  </head>
  <body>
    <div id="item1">1번 아이템</div>
    <div id="item2">2번 아이템</div>
    <div id="item-list">
      <div id="item3">3번 아이템</div>
      <div id="item4">4번 아이템</div>
    </div>
  </body>
</html>

크기 : width, height

크기는 웹의 기본 단위인 px 혹은 부모 태그의 크기를 기준으로 한 % 가 있습니다.

width: 선택자 태그의 너비

height : 선택자 태그의 높이

#item {
	width: 300px; /* 웹에서 px은 크기의 기본 단위입니다 */
	height: 30%; /* 부모의 크기 대비 30%를 차지합니다 */
}

색상 : color, background-color

색상은 css에서 기본으로 설정되어 있는 예약 색상(red,blue 등)과 rgb로 표현됩니다.

color : 폰트의 색상을 정하는 속성

background-color : 선택자 태그의 배경색을 정하는 속성

#item {
	color: red; /* red, blue 등 css에서 이미 예약된 색상입니다 */
	color: rgb(255,0,0) /* rgb는 색상을 표현하는 표준 색상값입니다 */
	color: #ff0000; /* rgb를 16진수 형태로 표시할 수도 있습니다 */
	background-color: red
}

폰트 : font-size, font-weight

font-size : 선택자 안에 있는 텍스트의 크기를 정하는 속성 (단위 : px)

font-weight : 선택자 안에 있는 텍스트의 굵기를 정하는 속성 (100 ~ 900)

#item {
	font-size: 32px;
	font-weight: 500;
}

여백: margin, padding

태그의 여백을 나타내는 속성으로 margin 과 padding이 있습니다.

margin : 선택자의 바깥의 여백을 설정합니다

padding : 선택자의 내부의 여백을 설정합니다.

#item {
	margin: 16px; /*상하좌우 모두 margin 16px이 적용됩니다*/	
	margin-right: 8px; /*오른쪽에 margin 8px을 줍니다*/	
	padding: 0 8px 0 0; /*순서대로 상 우 좌 하에 padding 값을 줍니다.*/ 
}

테두리: border

태그의 테두리에 선을 적용하는 속성입니다.

border 값은 순차적으로 너비 스타일 색상이 들어갑니다.

#item {
	border: 1px solid #ff0000 /*너비 : 1px, 스타일 : 실선, 색상 : 빨강(rgb)*/
}

이 외 더 사용되는 CSS는 아래 링크를 참고하세요

http://www.walterz.net/2017/08/18/자주-사용되는-css-속성/

FLEX 레이아웃 익히기

우리가 만들었던 HTML 요소들을 자유자재로 배치하기 위해선 어떻게 해야할까요?

  1. 기존에 DIV 요소는 줄바꿈이 되어 수직으로 배치가 되는데, 수평적으로 배치한다.
  2. 자식을 부모 기준 가운데 정렬을 한다

위 예시와 같이 요소들을 마음대로 배치하기 위해서 옛날에는 float 과 display 속성(table, inline-block) 등을 사용했습니다. 그러나 요새는 레이아웃을 쉽게 배치할 수 있는 Flex 라는 친구가 대세가 되었습니다. 우리가 앞으로 배울 웹, 앱에서는 대부분의 요소를 Flex로 배치할 것이므로 정말 중요하겠죠?

1. Flex 기본

Flex의 핵심은 Container와 Item입니다. Container(부모)의 첫째 자식이 되는 Item들을 Flex를 통해서 쉽게 정렬할 수 있습니다.

(설명 잘 해주는 링크 : https://heropy.blog/2018/11/24/css-flexible-box/)

기본 코드

<html>
    <head>
        <style>
            .parent {
                background-color: aqua;
            }

            .child {
                width: 100px;
                height: 100px;
                background-color: blue;
								margin-right: 8px;
            }
        </style>
    </head>

    <body>
        <div class="parent">
            <div class="child">
                자식
            </div>
            <div class="child">
                자식
            </div>
            <div class="child">
                자식
            </div>
				</div>
    </body>

</html>

2. 컨테이너(부모) 속성

flex-direction, 자식의 정렬 방향 설정하기

flex-direction을 통해 기준선을 설정합니다. row는 수평으로, column은 수직으로 정렬합니다.

.parent {
	display: flex;
	**flex-direciton: column;** 
}

justify-content

아이템 정렬 방향(by flex-direction)과 같은 방향으로 아이템의 여백을 관리할 때 설정합니다.

flex-direciton이 row이면 수평으로, flex-direction이 column이면 수직으로 배치됩니다.

기본 값은 flex-start 입니다.

.parent {
	display: flex;
	**justify-content: center;**
}

align-items

아이템 정렬 방향(by flex-direction)과 수직 방향으로 아이템의 여백을 관리할 때 설정합니다.

flex-direciton이 row이면 수직으로, flex-direction이 column이면 수평으로 배치됩니다.

기본 값은 stretch 입니다.

.parent {
	display: flex;
	**align-items: flex-start;** 
}

flex-wrap

아이템이 컨테이너를 넘어섰을 때 어떻게 처리할 것인지 설정합니다. 기본 값은 nowrap 으로 부모의 크기(너비 or 높이)를 기준으로 자식들이 알아서 공간을 나눠서 나열됩니다. 즉 줄바꿈이 일어나지 않는 거죠.

많은 상품 아이템들을 보여줘야 할 때 flex-wrap에 wrap을 설정하면 알아서 줄바꿈이 됩니다.

.parent {
	display: flex;
	**flex-wrap: wrap; /*nowrap(기본), wrap ... */**
}

3. 아이템(자식) 속성

flex-basis

자식의 최소 너비를 설정할 때 사용합니다(수직정렬일 때는 높이가 되겠죠?)

기본 값은 auto입니다.

flex-grow

Container에 여백이 생겼을 때 아이템이 어떻게 영역을 차지할지 설정합니다. 다른 아이템들과 비교해서 해당 비율로 여백을 가져갑니다.

기본 값은 0입니다.

flex-shrink

Container가 자식들이 차지하는 공간보다 줄어들었을 때 너비를 어떤 비율로 줄일지 정합니다. 다른 아이템들과 비교해서 해당 비율로 줄어들게 됩니다.

기본 값은 1입니다

(실제로 flex-shrink는 계산이 복잡해서 많이 사용하지는 않습니다)

위 세가지 요소를 flex 라는 하나의 속성으로 요약해서 표현하곤 합니다.

flex: 증가너비 감소너비 기본너비; 
/*만약 해당 값들이 생략되면 기본 값이 적용됨*/
.child {
	flex: 1 1 20px /*증가너비 감소너비 기본너비*/
	flex: 1; /*증가너비만 적용되고 감소너비(1), 기본너비(auto)는 기본값으로 적용됨 */
	flex: 1 1; /*증가너비, 감소너비가 적용됨*/
	flex: 1 30px; /*증가너비, 기본너비가 적용됨*/
}
profile
Corner
Full-stack Engineer. email - corner3499@kakao.com,
이전 포스트

Node-sass 설치 에러 & npm install 설치 에러

다음 포스트

[기초] 데이터로 가지고있는 html태그 띄어쓰기, 줄바꿈 속성

0개의 댓글