[ CSS, html ] 개념 정리(기초) 2탄

* text-align : center(left, right)

1. 자기 자신한테 text-align을 주면 자신이 움직이는게 아니라 자기가 가지고 있는 텍스트를 움직인다.

2. 그리고 자식 엘리먼트가 가지고 있는 텍스트를 부모 엘리먼트가 text-align을 주고 움직일 수도 있다.

 

1. 위와 같이 자식 엘리먼트에 너비와 높이를 주고 색을 입히면 요소에 크기가 정해져서 텍스트가 움직일 수 있는 반경이 제한된다. 텍스트가 움직이지 않는게 아니라 자식 엘리먼트 크기 안에서 배치가 되는 것이다.

2. 자식엘리먼트를 이동시키기 위해서는 2가지 방법이 있다.

(1). 자식 엘리먼트인 div를 display:inline-block; 으로 하면 된다. 그러나 문제가 될 수 있는 점 발생.

=> 자식 엘리먼트가 display:inline-block으로 인해 글자화되어 오른쪽으로 이동하고, 자식 엘리먼트의 text 또한 글자로써 자식 엘리먼트 내에서 오른쪽으로 이동하게 된다. 엘리먼트와 텍스트가 함께 이동한다.

(2). display를 건들지 않고 자식 엘리먼트 자신(본인)한테 margin-left, right 등을 주어 움직일 수 있다.

 

 

* width(너비)는 부모의 너비에 영향을 받는다. 엘리먼트들의 부모는 body 이다. 

body와 엘리먼트들은 html의 자식이다. width를 주지 않고 height(높이)만 주었을 때, 화면에 보여진다.

width는 기본 display:block에 의해 옆으로 쫙! 늘어난다. (width를 지정해주는 순간 그 크기로 변한다.)

그러나 height를 입력하지 않으면 화면에 나타나지 않는다!

div의 width는 부모 엘리먼트 section의 너비(body:부모 엘리먼트의 80%)에 display:block으로 최대한 늘어난 것.

 

* css를 시작하기 위해 가장 먼저 해야할 일

-> 노말라이즈 

 

 

* 메뉴만드는 HTML 태그 

메뉴박스(nav), 메뉴(section), 메뉴아이템(div), 메뉴아이템 텍스트(a)로 마크업, 이유 : 모든 작업의 시작은 HTML 구조를 세우는 것 부터 입니다.

 

 

 

 

 

 

* position (static, relative, absolute, fixed) : 태그들의 위치를 지정하는 CSS 

1. 모든 태그들은 position 기본값이 static 이다. 

-> 차례대로 왼쪽에서 오른쪽 또는 위에서 아래로 쌓인다.

2. z-index : 기본값 0, 다른 태그들보다 위에 위치시키려면 z-index 값을 1로 해준다. 

3. absolute의 경우 부모의 position에 영향을 받는다. 

부모 엘리먼트 중에 relative, absolute값을 갖고 있지 않다면 position값이 static인 body의 영향을 받는다.

4. position 값을 fixed로 주면 화면을 스크롤해도 지정된 자리에 고정되어 따라다닌다.

5. absolute는 부모가 가진 relative, absolute 안에 갖힌다.

6. relative는 유령(absolute)의 집일 뿐 유령이 아니다. 다른 엘리먼트들과 겹쳐지지 않는다.

     relative는 유령은 아니지만 left, right의 위치 지정을 적용할 수 있다.

          그러나 top, bottom이 먹질 않는다.

7. absolute는 부모 엘리먼트의 relative를 기준으로 이동하게 된다. (left, right, top, bottom)

 

 

 

-> 유령들을 유령의 집으로 가두고 유령의 집을 자유로이 원하는 위치에 옮기고 싶을 때는 부모 엘리먼트한테

position을 relative가 아닌 absolute로 주고 left, right, top, bottom을 적용시키고 "transform"이라는 css를 이용해서 정중앙의 위치로 조정한다.  정중앙의 위치를 화면(부모의 부모)을 기준으로 %로 적용하여 화면이 작아져도 해당 엘리먼트는 정중앙에 위치하게 된다.

=> 정리

1. relative는 유령들을 가두는 집. 유령들을 가두고 자유로이 움직이기에는 한계가 있다.

2. position:relative; 속성을 지닌 부모를 둔 자식 엘리먼트들은 부모를 기준으로 움직이게 된다.

(후손 유령들의 기준점이 된다.)

3. 유령을 가두고 유령의 집을 원하는 위치에 이동시키고 싶다면 position을 absolute로 작성해서 활용한다

(★ 정중앙 위치 활용 팁 : "transform:translateX(-50%) translateY(-50%); )

★transform : 주변 엘리먼트들한테 영향을 주지 않는다.

 

 

 

 

부모 엘리먼트의 width, height를 고정(px)으로 주지 않고 top, bottom, left, right를 px로 고정해주면 

자식 엘리먼트들의 width, height가 여백에 맞춰서 50%씩 크기가 조정된다.   여백은 고정이므로 화면 크기가 변해도 여백은 그대로! 자식 엘리먼트들의 크기는 화면의 크기에 따라서 변하게 된다.

== 연습 예제 ==

1. 엘리먼트들 크기 고정으로 화면 변화에 반응 없는.

2. 화면 크기 변화에 따라 엘리먼트들의 크기가 유연하게 변하는

3. 화면 크기 변화에 따라 엘리먼트들의 크기가 유연하게 변하지만 여백은 고정.그대로.변화없는.

 

 

*box-sizing:border-box; 안했을 때, 했을 때 차이 : border한 경우 box 밖으로 나가느냐, 안나가느냐 ...?!

*box-sizing:border-box; --> 공부하기. (아직 전혀 감이 없음)

 

 

 

*white-space:nowrap;   -> text 줄바꿈 절대 금지.

*overflow-x:auto;  -> 필요에 따라 가로 스크롤바 생성

*overflow-x:scroll; -> 스크롤바 무조건 생성

*overflow-x:hidden; ->넘쳐나는 내용 무조건 숨김

*text-overflow:ellipsis; -> 넘친 텍스트 ...으로 처리.

 

 

1. border="1" 테이블 종류(선, 모양)

2. thead : 테이블 큰제목?

3. tr : 가로 줄 의미

4. th : 가로 칸(제목?)

5. tbody : 테이블 내용

6. td : 칸 내용

 

 

 

1. table을 display:inline-table; 로 지정해주면 text화해서 위치를 조정할 수 있다.

(위의 그림은 center가 맞음.   캡쳐 문제)

 

 

 

* transition  : 변화를 주는 옵션.  body의 height는 꼭 지정해주어야 한다.  기본값이 0은 아니고 

코드펜 만의 특징으로서 body 에 "min-height:100vh;" 를 해주면 화면 전체가 body가 된다는...

(버그 아님 주의)

 

* opacity:  투명도 

0 : 완전 투명, 안보임

1 : 완전 불투명, 보임

 

 

 

 

:not 아니다

:only-child  오직 나 혼자(엘리먼트가 본인만 있는 경우, 형제 없음)

::after  뒤에

::before 앞에