공부기록

---------------------------------------------------------

* 생활코딩 WEBn 정독하기 project *

줄바꿈

LINK : https://opentutorials.org/course/3084/18403

----------------------------------------------------------

1. 줄바꿈을 위한 경쟁관계에 있는 태그 두 가지. 

1) 코드에서 줄바꿈을 한다고 해도, 화면에서 줄 바꿈 되어 나오지 않는다. 따라서 별도의 태그 필요. 

2) br tag (추천 검색어 : HTML new line tag - 직접 검색해서 찾아보기! )

1. <h1>리그 오브 레전드란?</h1>
2. 리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 <strong>서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 <u>전략 게임</u></strong>입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁취하세요.<br><br>기지 파괴하기
3. <br>넥서스는 양 팀 기지의 심장부입니다. 적의 넥서스를 먼저 파괴하는 팀이 게임에서 승리합니다.<br><br>아군 넥서스<br>넥서스에서 미니언이 생성됩니다. 넥서스 뒤에 있는 소환사의 제단에서 체력과 마나를 빠르게 회복하고 상점을 이용할 수 있습니다.<br><br>적팀 넥서스<br>적팀 기지에는 아군과 동일한 넥서스가 있습니다. 적팀 넥서스를 파괴하면 게임에서 승리합니다.

• br 태그의 특징
  • 보통 태그는 열고 닫히는 태그인데, br 태그는 닫지 않음. 
  • 줄바꿈 많이 하고 싶으면 여러 번 쓰면 된다.

3) p tag (추천 검색어 : HTML paragraph tag- 직접 검색해서 찾아보기) 

1. <h1>리그 오브 레전드란?</h1>
2. 리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 <strong>서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 <u>전략 게임</u></strong>입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁취하세요.
3. <p>기지 파괴하기
4. <br>넥서스는 양 팀 기지의 심장부입니다. 적의 넥서스를 먼저 파괴하는 팀이 게임에서 승리합니다.</p>
5. <p>아군 넥서스<br>넥서스에서 미니언이 생성됩니다. 넥서스 뒤에 있는 소환사의 제단에서 체력과 마나를 빠르게 회복하고 상점을 이용할 수 있습니다.</p>
6. <p>적팀 넥서스<br>적팀 기지에는 아군과 동일한 넥서스가 있습니다. 적팀 넥서스를 파괴하면 게임에서 승리합니다.</p>

• p 태그 특징
  • 열리는 태그 / 닫히는 태그 있음.
  • 단락에 사용하기 위해 만든 태그이기 때문에, 웹페이지를 정보로써 가치 있게 만든다. 
  • 이것이 '단락'이라고 의미론적으로 표현. 
  • br은 단순히 줄 바꾸는 모양을 만드는 것. 
  • 정해져 있는 여백만큼만 움직이기 때문에 디자인에 제약이 있음. 

2. p 태그에 여백을 세밀하게 조절해 줄 CSS 

1. <h1>리그 오브 레전드란?</h1>
2. 리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 <strong>서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 <u>전략 게임</u></strong>입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁취하세요.
3. <p style="margin-top:40px;">기지 파괴하기
4. <br>넥서스는 양 팀 기지의 심장부입니다. 적의 넥서스를 먼저 파괴하는 팀이 게임에서 승리합니다.</p>
5. <p>아군 넥서스<br>넥서스에서 미니언이 생성됩니다. 넥서스 뒤에 있는 소환사의 제단에서 체력과 마나를 빠르게 회복하고 상점을 이용할 수 있습니다.</p>
6. <p>적팀 넥서스<br>적팀 기지에는 아군과 동일한 넥서스가 있습니다. 적팀 넥서스를 파괴하면 게임에서 승리합니다.</p>

CSS로 디자인을 세밀하게 만질 수 있기 때문에, 최대한 의미에 맞는 태그를 쓰자.! 

* 관련된 게시물 *

[생활코딩_WEBn] 5. HTML 코딩과 실습환경 준비

[생활코딩_WEBn] 기본 문법 - 태그

[생활코딩_WEBn] 혁명적인 변화

[생활코딩_WEBn] 통계에 기반한 학습

4. 테이블태그 : 표를 구성하기 위한 태그 . 엑셀과 흡사 

* 간혹 레이아웃을 위해 사용되기도 하는데 권장하는 방법은 아니다. 

1) 기본구성 : <table> </table> 태그 안에 줄(행)을 나타내는 <tr></tr> 태그, 그 안에 셀을 나타내는 <td></td> 태그.

* 표를 만들때는 줄당 존재하는 셀의 수가 같아야 한다 

- 코드

-결과

-속성 border="" : 표의 외형을 바꿔준다. CSS로 하는것이 바람직하지만 아직 배우지 않았기 때문에 border="1"으로 표를 구분할 수 있게 하자. 

2) 셀 병합 : 병합할 셀들 중 가장 왼쪽(가로셀병합) or 위(세로셀병합)의 셀에 속성을 사용한다. 이 외에 병합되는 셀들은 지운다.

 * 꼭 맨 왼쪽이나 위쪽 셀을 남겨야 한다. 

- 2x3 table 준비 

- 가로 셀병합 : 가장 왼쪽 셀에 colspan="병합할 셀 갯수" 속성 이용, 나머지 병합되는 셀은 지운다

↓ 1-1과 1-2 병합

- 세로 셀병합 : 가장 위쪽 셀에 rowspan="병합할 셀 갯수" 속성 이용, 나머지 병합되는 셀은 지운다

↓ 1-3과 2-3 병합

* ㄱ자 병합은 불가능하다 (1-1, 1-2,1-3,2-3을 병합하는 경우)

3) thead, tbody, tfoot, / 셀별 글씨두껍게 가운데정렬 하기(th태그) / 열별 너비 조정

- 아래의 table 만들기

(1) 기본 6x4 테이블 만들기

(2) 셀병합 : (1-1~1-2)가로 , (3-1~4-1)세로 , (2-3~4-3)세로, (2-4~5-4)세로, (6-1~6-4)가로

-> 내용물 집어넣기

(3) thead, tbody, tfoot *              

- html 에서는 table을 줄별로 thead, tbody, tfoot으로 나눌 수 있다. 어느 순서로 나열해도 테이블은 thead-tbody-tfoot순으로 정렬되어 만들어진다.

- 사용방법 : tr-td 태그를 각각의 태그(<thead></thead> , <tfoot></tfoot>, <tbody></tbody>)로 감싼다.

* 보통 tbody 부분이 길기때문에 thead-tfoot-tbody 순으로 사용하는 경우가 많다.

(4) 두껍게 가운데정렬 하기 (th태그) 

: 셀을 만들때 사용하는 td태그 대신 th 태그를 사용한다. 

( 셀을 만들때 사용할 수 있는 태그 : td, th...)

(5) 열별 너비 조정하기 : colgroup태그-col태그

table태그 여는곳 바로 아래에 <colgroup><colgroup>태그 , colgroup태그 안에 표의 열(세로줄) 갯수 만큼의 <col width=""/> 태그(풀태그)

* col태그의 갯수와 만들 테이블의 열(세로줄)의 갯수가 맞아야 한다. 

* 이상적인 테이블 만들기 순서 :  행, 열의 갯수 세기 -> 헤드,풋,바디 기본 틀만들기 -> 셀 만들기 -> 크기 조정- > 병합

* 의미없는 셀을 가로줄에 몇개 더 만들어 병합한다고 해도 셀의 너비가 넓어지진 않는다. 기본적으로 글자 크기에 맞춰짐

5.  class와 id 

1) div 태그와 p태그 

- div 태그 : 레이어, 영역을 표시한다. 

- p 태그 : 문단을 표시한다

* 차이점 : p태그는 div태그 안에 들어갈 수 있지만 div 태그는 p태그안에 들어갈 수 없다.

< class와 id 공부를 위해 CSS를 잠시 사용한다. 원래는 다른 파일에 해야 바람직하지만 이번엔 그냥 같은 파일안에서 사용한다.>

2) 기본적인 CSS 

- CSS : <style> ~~~ </style> 

- 주석 : /* ~~ */ , 중복주석 불가능

- 기본명령법 : 선택자(selector) {속성 : 속성에 해당하는 값} 

* 속성에는 크기, 색, 등등이 들어갈 수 있다. 

* 속성이 끝날때마다 세미콜론(;)을 붙여주면 띄어쓰기, 엔터와 상관없이 계속해서 속성을 추가할 수 있다 

- 명령어의 선택자가 style 태그 (CSS부분) 아래에 있던지 위에 있던지 상관 없이 적용된다

- ex )  

+) HTML안에는 CSS가 가능하지만 CSS안에는 HTML이 불가능하다

- 선택자에 해당되는 것은 효과가 다 적용된다. 

: div로만 하면 원하는 div 에 원하는 색을 입힐 수 없다 -> 각기 이름을 붙여줌. (class, id) 

* 맨 마지막에 명령한 것을 따른다

3) class 와 id : CSS에서 html에서 만든 뼈대를 꾸밀때 찾아가기 위해 사용하는 이름

- class / id 를 만들때 : 영역태그 안에 속성 class = "" / id = "" 

- 찾아갈때 

(1) class : CSS 영역 안에서 선택자를  '태그명.class이름' 

(2) id : CSS 영역 안에서 선택자를 '태그명#id이름'

- class 와 id

class 

(1) 태그에 이름을 붙여준다.

(2) 클래스는 여러번를 중복해서 사용해도 된다. 

(3) 숫자부터 쓰지 않는다

id

(1) 태그에 '고유한'이름을 붙여준다. *왜 위의 예제에서 두번 사용했는데 가능했을까?

(2) 페이지 내에 한번만 작성이 되어야 한다(고유해야한다)

(3) 클래스보다 상위개념. 둘다 특성 준다면 id 가 이긴다.

: id로 먼저 navy를 입히고 class로 violet을 입혔다. 결과는 navy - id 가 class보다 상위개념

- 중복 class

: class 지정할때는 띄어쓰기로 구분. 부를때는 .으로 구분 ( 점 사이에 띄어쓰기가 있으면 안된다)

: 이렇게도 가능 

* div.toy.story1 { ~ } 으로 지정한 스타일은 div.toy 나 div.story로 바꿀 수 없다

*id 는 안됨

6. 태그의 박스모델 구조 (박스의 공간) & 레이어구조

1) 레이어의 너비, 높이 (속성 width : ~px , height : ~px)

- 티는 안난다 

2) 레이어의 배경색 (속성 background-color : 색상표현)

- 색 이름 외의 여러가지 색상표현 

(1) #16진수 표현

- # 뒤의 16진수가##$$%% 형태로 둘둘둘 같을때는 줄여쓸 수 있다

-#000000

(2) RGB (red, green, blue) 0~255

* CMY (cyan, magenta,yellow) : 잉크에 사용된다 , rgb와 보색관계. html에서 지원되지 않는다

(3) HSl (Hue-색상 0-360 , Saturation-채도 0%-100% , lightness-명도 0%-100%) : 어려워서 잘 안쓴다

(3) transparent : 투명, 비어있는. 포토샵에서 회색 체크로 나오는 상태

* 정말 다양한 색을 사용할 수 있다

3) 여백 ( 원래 기본적으로 조금씩 바깥여백이 있다. 그것에 추가적으로 여백을 주는 것)

(1) 바깥여백(margin-방향 : ~px) 

* 방향 : top, right, bottom, left

: div. layer의 총 차지공간은 400x400 (px) 

오른쪽, 아래는 티가 안나지만 여백이 있다! 

- 방향표시 없이 나타내기 : 시계방향으로 돈다

(2) 안쪽여백 : 안쪽에 공간이 생긴다는것, 해당크기가더 늘어나게 된다. 여백부분은 사용 불가. (padding-방향 : ~px)

- 총 차지공간(원래크기(300x300 (px) ) + 바깥여백 (네방향 50px) + 안쪽여백 (네방향 50px) : 500x500 (px)

* 바깥여백과 마찬가지로 방향표시 없이 사용할 수 있다. 

*오른쪽, 아래 티가 안나지만 안쪽여백 존재! 

+) CSS 에서 두 단어가 붙을때 '-' 사용 

세미콜론은 맨 마지막 명령문 빼고 붙어야 하는데 헷갈릴 수 있으니 다 붙이는게 좋다