HTML&CSS < Replit 정리 >

do yeon kim·2022년 6월 22일
CSShtmlreplit
0

HTML

html은 우리가 웹페이지 상에서 보는 화면을 그리기 위해서 필요한 것이다.
웹페이지에서 화면을 그리기 위해서는 html, css, js가 필요하다.
html이 화면의 큰 구조를 잡는자면, css는 구조를 잡은 곳에 디자인을 추가하고, js는 그런 화면을 살아 움직이게 하느 역할을 한다.

html은 태그들의 집합이라고 말할 수 있다. 태그는 의미를 가진 태그도 있고, 아무런 의미를 가지지 않는 태그도 있다. 태그는 html문서상에서 자신의 위치를 알려주며, 자신이 어떤 자료인지 알려주는 역할도 한다.

태그는 태그에 필요로 하는 속성과 속성값이 존재한다.
<div class = "we" id = "code">
위에서 tag <div>의 attribute(속성)은 class,id이고, element(요소)는 we,code이다.

각 태그마다 반드시 필요한 속성이 존재한다.
예를 들어 이미지태그의 경우는 이미지소스를 알려주는 scr 속성이 필요하다.

태그에는 닫는태그가 있는 태그와 닫는태그가 없는 태그가 있다.

  • 닫는태그가 있는 태그
    div, a, span 등
  • 닫는태그가 없는 태그
    img 등 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

가장 기본적인 html의 형태이다.


html 주요 태그

<!DOCTYPE html> 은 무슨 버전의 html을 사용하는지 알려준다.
<head> 은 큰의미의 웹페이지의 설정으로 실제 그려지는 부분은 아니다.
<body> 은 웹페이지에 실제로 그려지는 부분이다.
<meta charset="UTF-8"> 한국어를 사용하기 위해서는 있어야하는 설정
<meta name="viewport" content= 디바이스의 가로크기가 곧 웹페이지의 가로크기
<title> 웹페이지의 타이틀을 나타낸다.



h1~h6

h1~h6는 제목을 나타내며 크기가 작은 수록 큰 글씨가 된다.



span

인라인요소의 태그이다. 글자를 쓰게 되면, 글자를 쓴 만큼만 공간을 차지한다.



div

블록요소의 태그이다. 글자를 쓰면, 한줄을 모두 차지한다.



a

hyper text markup language (html)에서 hyper text를 맡고 있는 주요 태그이다. a태그는 링크의 이동이 가능한 태그이다.



ul, ol , li

ul태그는 unordered list로 순서가 없는 것을 말하며
ol태그는 ordered listfh 순서가 있는 리스트를 의미한다.
li는 ul태그와 ol태그 안의 요소라고 생각하면 된다.



button

버튼으 만드는 태그이다.



table, tr, th, td, tbody, th

<table>
	<thead>
		<tr>
			<th>음식</th>
			<th>가격</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>치킨</td>
			<td>10000</td>
		</tr>
		<tr>
			<td>피자</td>
			<td>10000</td>
		</tr>
		<tr>
			<td>햄버거</td>
			<td>10000</td>
		</tr>
	</tbody>
</table>

table태그는 가장 큰 틀을 만든다.
그안에 크게 제목을 나타내는 thead태그와 본문을 나타내는 tbody태그가 있다.
thead,tbody태그 안에는 다시 th td가 있다. th는 제목을 나타내며, td는 데이터를 나타낸다.




html 태그의 attribute

attribute는 태그의 속성을 의미한다.
태그에는 한개 이상의 속성을 줄 수 있다.
속성에 대한 속성 값을 element라고 한다.
태그마다 사용할 수 있는 attribute가 정해져 있는 것도 있다.
그 이외에 id와 class속성이 있다.



id

id는 html문서 안에서 이 태그에 대한 고유값을 주고 싶을 때 사용한다.



class

class는 html문서 안에서 태그끼리의 그룹화를 하기 위해서 사용한다.



Semantic Web & Semantic Tag

Semantic Web

현재의 컴퓨터처럼 사람이 마우스나 키보드를 이용해 원하는 정보를 찾아 눈으로 보고 이해하는 웹이 아니라, 컴퓨터가 이해할 수 있는 웹을 말한다. 즉 사람이 읽고 해석하기에 편리하게 설계되어 있는 현재의 웹 대신에 컴퓨터가 이해할 수 있는 형태의 새로운 언어로 표현해 기계들끼리 서로 의사소통을 할 수 있는 지능형 웹이다.

원리는 사람들이 이해할 수 있도록 자연어 위주로 되어 있는 현재의 웹 문서와 달리, 정보 자원들 사이에 연결되어 있는 의미를 컴퓨터가 이해할 수 있는 형태의 언어로 바꾸는 것이다.

[네이버 지식백과] 시맨틱 웹 [Semantic Web] (손에 잡히는 IT 시사용어, 2008.02.01)

웹의 본래 목적은 정보를 전달하는 것이라고 생각한다.
하지만 웹이 거대해지고, 많은 사람들이 사용하면서, 웹은 본래목적인 정보를 전달한다는 것에서 벗어나, 좀더 예쁘게 사용자에게 보여지고 싶다.
좀더, 편리하게 보여지고 싶다 등의 불필요한 정보도 담게 되었다.
그러다보니, 웹이 정보전달로서의 목적이 아닌, 불필요한 정보도 들어가서, 컴퓨터의 입장에서는 정보를 찾는 것이 어렵다.
그래서 나온 것이 Semantic Web이다. Semantic Web은 사람이 이해 할 수 있는 자연어 위주가 아닌, 컴퓨터가 이해 할 수 있는 형태로 언어를 바꾼다.



Semantic Tag

Semantic Tag은 태그 자체에 의미가 있는 태그를 의미한다.
<div> 의 경우 어떠한 의미도 가지고 있지 않는 태그이다.
이와 반대로 article, aside, footer, header, main, nav, section 등의 태그는 의미를 가진 태그이다.



img vs div background-image

img태그는 Semantic Tag이다. 그림이라는 의미를 가지는 태그이다.
이미지라는 정보를 주는 태그이다.

div태그의 background-image는 그림이라는 의미보다, 사용자에게 더 좋게 보여지기 위한 장식용 태그로 정보보다는 디자인에 의미를 둔 태그이다.





CSS

앞에서 살펴본 html은 웹페이지의 구조를 잡는 언어였다.
css는 html이 잡아논 구조에 디자인을 더하느 작업을 한다.
html에 css를 적용시키는 방법은 크게 3가지가 있다.

  • inline방식

  • style태그방식

  • css파일방식

inline방식은 태그에 직접적으로 속성으로 css를 할당하는 것을 의미한다.
<div style = "color : red">

style태그방식은 style태그를 이용해서 디자인을 추가 하고 싶은 태그들을 한곳에서 관리한다.

css파일방식은 html파일과 css파일을 연결하는 것을 의미한다.
따로 파일을 분리해서 관리하므로, css에 대해서만 작성하면되고, html과 분리해서 관리할 수 있다는 장점이 있다. 하지만, css를 적용시키기 위해서는 선택자에 대해서 알아야한다.
선택자는 어떤 태그에 스타일을 적용실킬 것인가를 정하기 위해서 사용하는 것이다.
css파일방식은 <link rel="stylesheet" href=""> link태그를 이용해서 html파일과 연결 시킨다.



선택자

선택자에는 다양한 종류가 있다.

  • 태그선택자
    태그이름으로 태그에 접근한다.

  • id선택자
    id이름으로 접근한다. 접근시에는 #id이름

  • class선택자
    class이름으로 접근한다. 접근시에는 .class이름

  • etc



font관련 css

selector{
	font-family : ; font의 서체 관련
	font-size	: ; font의 사이즈 관련
	font-weight : ; font의 굵기 관련
	font-style	: ; font의 스타일 관련
	color		: ; font의 색상 관련

}


text관련 css

selector{
	text-align : left, center, right 텍스트의 정렬
	text-indent: 50px 텍스트 들여쓰기
    
    #참고 `&nbsp`는 스페이스를 의미한다
}


margin과 padding과 border

margin은 테두리의 바깥부분을 나타낸다. 위/오/아래/왼 순서로 준다.
2개의 값만 있을 때의 의미는 첫 번째는 위, 아래의 margin 이고,
두 번째는 왼, 오른쪽에 주는 margin 이라는 뜻입니다.

padding은 테두리의 안부분을 나타낸다.
border은 테두리를 의미한다.

box-sizing: border-box;
margin, padding, border등의 값을 요소에 주게 되면, 요소가 설정한 크기에 이 값들이 추가 되므로 더 크게 된다.
이런 변화를 막기 위해서 사용하는 코드이다.

* {
	box-sizing : border-box;
}


상속과 그룹

css의 선택자는 태그를 포함하는 태그 css스타일을 추가하면, 그 안에 있는 태그까지 영향을 미친다.
안에 있는 태그는 따로 자신만의 css를 선택하지 않는 한, 밖에 있는 태그의 영향을 받는다.

css선택자는 ,로 나누어서 여러개를 적을 수 있다. 그럼 ,로 구분된 모든 태그에 css가 영향을 끼친다.

selector1, selector{
	font-size: 10px;
    color: blue;

}


이미지 크기 조정

html안에 이미지를 넣을 수 있는 방법은 두가지 있다.

  • img태그
  • 일반태그에 backgroud-img스타일 사용

Semantic Tag에 해당하는 img태그는 그 자체로 컴퓨터에느 이미지 파일이라는 것을 알수 있다.
background0-img는 태그에 스타일을 추가 한것으로 정보가 아닌 디자인에 목적을 두었다.



display block요소, inline요소

태그는 태그자체의 기본 값으로 block요소인지, inline요소인지가 포함되어 있다.
block요소는 한줄을 다 사용하는 요소로, 가로로 최대한 늘어나려고 하며,
상하로는 요소안에 들어 있는 컨텐츠의 크기만큼 최대한 줄어들려고 한다.

inline요소는 줄바꿈을 하지 않는다. 요소안에 들어있는 컨텐츠의 크기만큼만 차지한다. 가로로, 상하로 최대한 줄어들려고 한다.

inline-block요소는 외부적으로는 inline요소의, 내부적으로는 block요소의 특징을 가지는 요소이다.

태그는 기본적으로 block,inline의 특징을 가지지만, display속서을 이용해서 바꾸어 줄수 있다.



display

display는 css에서 layout을 위한 중요한 속성(properity)이다.
보통 태그는 display 에서 block, inline 기본 값을 가진다.



block요소

블록요소는 좌우로 최대한 늘어나려고 한다. 상하로는 블록요소안의 컨테츠 크기만큼을 최대로 만들려 최대한 줄어들려고 한다.

  • div
  • p
  • form
  • header
  • footer
  • section
  • etc



inline요소

인라인요소는 상하좌우 모두 최대한 줄어들려는 특징이 있다.
인라인요소 안에 글자가 있다면, 인라인요소는 글자의 크기만큼만 크기를 차지할 것이다.

  • span
  • a



inline-block

display속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline요소 처럼 줄바꿈 없이 한줄에 나란히 배치된다.
하지만 block요소처럼 width와 height속성 및, margin과 padding속성을 사용해서 크기 및 기타 작업이 가능하다.
내부적으로는 block요소를, 외부적으로는 inline요소의 규칙을 따른다.

  • button
  • input
  • select



margin auto

p {
  width:200px;
  margin-left : auto;
  margin-right: auto;
}

위의 코드는 p태그에 가로 값을 주고, margin의 왼쪽과 오른쪽을 자동으로 준것으로, 결과는 가운데 정렬을 한다.





Html & CSS

list

list는 html의 태그 중 하나로 관련된 데이터를 한곳에 모으기 위해서 사용하며 <li>를 사용한다.

<li>는 감싸는 태그가 필요하다. 두 종류의 감싸느 태그가 존재한다. 감싸는 태그 없이 혼자서 사용될 수는 없다.

<ol> <ul> 태그이다.
<ol> 태그는 ordered list로 순서가 있는 리스트를 만든다.
<ul> 태그느 unordered list로 순서가 없느 리스트르 만든다.

  ul,ol {
    list-style: none; 리스트에 기본적으로 있는 숫자나 동그라미 데코레이션을 제거한다.
  }

table

table은 표를 만들 수 있는 태그이다.
table, thead, tbody, th, tr, td 가 있다.

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

테이블은 테이블끼리 병합을 할 수 있다. 테이블의 모든 태그에 가능하지느 않다.
th, td 태그만이 병합이 가능하다.
병합에는 행병합(rowspan), 열병합(colspan)이 있다. 각 각 태그에 속성을 주어서 병합을 만들 수 있다.

위의 표에서 html실습 부분은 rowspan이 된 형태이다.
마지막 라인의 수업없습니다. 부분은 colspan이 된 형태이다.

<td rowspan = "3" > 하면 앞으로 나올 3개의 행을 합친다느 의미이다.
<td colspan = "2" > 하면 앞으로 나올 2개의 열을 합친다느 의미이다.



input

사용자가 직접 텍스트를 입력할 수 있느 태그로는 input태그와 textarea태그가 있다.

<input type="text" placeholder="ID"> # 텍스트 입력
<input type="password" placeholder="비밀번호"> # 비밀번호 같이 보이지 않는 텍스트 입력
<input type="number" placeholder="학번"> # 숫자 입력

#input 속성 value로 미리 값을 세팅 할 수 있다.



<textarea>소개:</textarea>

input::placeholder {
  color: #bbb;
}

input[type="text"]::placeholder {
  color: red;
}


position

Position

Html상에 코드의 작성과 상관 없이 원하는 위치에 요소를 그려내는 css의 속성이다.
Position의 속성 값으로는 4개가 있다.

  • absolute
  • static
  • relative
  • fixed

부모태그에 absolute, relative, fixed가 있으면, 자식태그는 부모태그를 참조해서 위치를 특정한다.



relative

position : relative; 로는 특별히 위치를 이동하거나 하지는 않는다.
top , bottom, right, left라는 속성을 이용해서 이동시킬 수 있다.

  • top
  • bottom
  • right
  • left

위의 네개의 속서은 relative가 있어야지 사용할 수 있는 속성이다.

selector {
  position: relative;
}
selector {
  top: -20px;
  left: 30px;
}


absolute

position: absolute 절대적인 위치를 둔다. 특정부모에 대해 절대적으로 움직이게 된다.

일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하면 됩니다



검색창 만들기

html파일

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div>
      <input type="text" placeholder = "검색어 입력">
      <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png" alt="img">
    </div>

  </body>
</html>


css파일

* {
  box-sizing : border-box;
}
div {
  position : relative;
  width: 300px;
}

input {
  width : 100%;
  border : 1px solid #bbb;
  border-radius : 8px;
  padding: 10px 12px 10px 12px
  
}

input::placeholder{ 	
  font-size: 14px;
}

img{
  position: absolute;
  height: 17px;
  top : 10px;
  right : 12px;
  margin: 0;
}


fixed

absolute, relative는 부모태그가 필요하고, 부모태그를 기준으로 삼지만,
fixed는 부모태그가 필요하지 않다.

fixed는 눈에 보이는 화면크기만큼, 화면 내에서만 움직인다.
스크롤을 내려도 fix된 위치에 고정되어서 움직이지 않는다.



html 파일

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>  
    <header>
      <img src="https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/apple/image_small.svg" alt="apple_img">
    </header>
  </body>
</html>


Css 파일


header{
  position: fixed;
  left: 0;
  right: 0;
  top : 0;
  height : 48px;
  background-color : rgba(45,45,45,0.95);
  
}

header img{
  width: 20px;
  height : 48px;
  
  position : absolute;
  left : 50%;
  margin-left : -10px;
  
}


flex

레이아웃은 화면을 크게 나누는 구조라고 생각하면 된다.
가로선과 세로선의 기준을 정해주는 것이다.
만약 center라고 한다면 center에서 정렬, flex-end라고 하면 끝에서 정렬하는 식이다.

참고
justify-content는 실제요소가 움직이는 느낌이라면, align-item은 요소들이 하나로 뭉쳐서 정렬된다는 느낌이다.

justify-content :

justify-content: flex-end;

  • flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.

  • flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.

  • center: 요소들을 컨테이너의 가운데로 정렬합니다.

  • space-between: 요소들 사이에 동일한 간격을 둡니다.

  • space-around: 요소들 주위에 동일한 간격을 둡니다.



align-items :

세로선 상에서 정렬한다.

  • flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.

  • flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.

  • center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.

  • baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.

  • stretch: 요소들을 컨테이너에 맞도록 늘립니다.

화면 중앙정렬
justify-content : center;
align-items : center;



flex-direction

정렬할 방향을 지정한다.
flex-direction으로 column방향을 지정하게 되면,
justify-content, align-items의 축들이 반대가 된다.

그래서
align-items하면 세로축이 정렬된다.

flex-direction:

  • row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.

  • row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.

  • column: 요소들을 위에서 아래로 정렬합니다.

  • column-reverse: 요소들을 아래에서 위로 정렬합니다.

flex-direction으로 정렬할 방향을 지정하고,
justify-content로 가로선 상에서 정렬
align-items로 세로선 상에서 정렬을 한다.



flex order속성

요소에 대하여 순서를 지정한다.
각 요소에 지정할 수 있다.



flex align-self

요소에 대해서 각자 지정할 수 있다.

  • flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.

  • flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.

  • center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.

  • baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.

  • stretch: 요소들을 컨테이너에 맞도록 늘립니다.



flex wrap

요소들을 한줄 또는 여러줄로 정렬한다.

  • nowrap: 모든 요소들을 한 줄에 정렬합니다.

  • wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.

  • wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.



align-content

세로 선상에 여분의 공간이 있는 경우 flex컨테이너 사이의 간격을 조절한다.
여러 줄이 있을 경우 사용가능 하며, 한 줄만 있는 경우라면, 변화를 알 수 없다.

  • flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.

  • flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.

  • center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.

  • space-between: 여러 줄들 사이에 동일한 간격을 둡니다.

  • space-around: 여러 줄들 주위에 동일한 간격을 둡니다.

  • stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

profile
do yeon kim
이전 포스트

CSS - position

다음 포스트

Python < Replit 정리 01 - 14 >

0개의 댓글