css styling

 Common Inline Elements 

-기본형이 박스가 아닌(기본으로 그 줄 전체를 width로 가져가는 것들) 것

-다른 element들을 막지 않음. 딱 내부값의 길이만큼 => width 조절 불가

• Spans (<span>)
• Images (<img>)
• Anchors (<a>)

<p>a <span class="pro">pro</span>grammer</p>

이러면 a programmer 로 class이름이 pro인 것을 css파일에서 설정해줘서 일부만 밑줄있게 가능

인라인 원소의 경우, 하나가 한 줄을 다 사용하지 않기 때문에, 그 줄의 공간이 없을 때까지 계속 한 줄에 쓰여지게됨

• display: inline; =>같은 줄에 계속 작성(이게 기본), 당연히 width 조절 불가
• display: block; =>블록처럼, 같은 줄에 다른 것을 작성x, width조절 가능하게 함,
• display: inline-block; =>width 조절가능, 같은 줄에 여러 개 작성 가능
• display: none; => 그 element 제거(안보이는 거 아니고 없는 것 취급함)
• visibility: hidden; => 배경색이랑 똑같이 된다고 생각.

1. Content가 길이, 폭 일차적으로 결정함

2. code에서 오는 order

3. children sit on parents : 더 안쪽에 있는 게(nested) 위에 위치함

 

 Position / Corrdinates 

* position : 값

• static : html  rules
• relative : static이었으면 있었을 곳에서 이동하는 거임
  • 다른 원소들의 위치에 영향을 주지 않음(다른 것들은 원래 자리에 존재) -> 즉, 겹칠 수도 있다
  • top: 50px; ->위쪽에 50px의 margin을 주는 것과 동일(그만큼 위로 이동하는게 아님)
  • 원소가 원래 있었을 곳에서의 위치를 기준으로 함(화면 기준이 아님)
• absolute: 그 부모에 relative하게
  • 원래 관계를 갖던(이웃하던)것들과의 관계를 깨고, 자기 혼자 움직임(그들은 이것을 없는 것 취급)
• fixed: 현재 화면에서 고정(스크롤해도 설정해둔 위치에 계속 존재)

* coordinates =>postion을 설정할 수 있는 값. 

  -이것으로부터의 margin 설정임

• top
• bottom
• left 
• right

 문자, 문단 정렬 

*text-align: 문자 정렬(center/ left/ right/ justify/inherit)

• center;
  • width 설정이 없는 모든 것들 중앙정렬
  • width가 설정되어있다면, auto를 통해 중앙 정렬로 자동적으로 설정 가능하도록 세팅 가능
• justify
• inherit

 font 

• font-family: 폰트 묶음

font-family: verdana, sans-serif;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

앞이 내가 원하는 폰트, 만약 이게 없으면 뒤에 있는 것으로 출력해줌

specific to less specific

*web safe fonts : 대부분의 os가 가지고 있는 폰트들 보여줌.

  다른 컴퓨터에 내가 쓴 폰트 없으면 다른걸로 보여질 수 있음

• Font embedding =>죽어도 이 폰트를 포기할 수 없다면...

website에 원하는 폰트 embedding 가능

 

 font size 

 font-size: 값;

• width 조절 : 크롬 설정에서 글씨 크기 조절 시 변동x(static하게 설정되는 것)
  • 중첩되면 가장 안 쪽에 있는 값으로 결정됨. 언제나와 그랬듯이
• %로 조절: 원래 크기(16px) 대비 %로 (dynamic)
• em: 'M'의 width(기본 16px)의 배수로 표현 (dynamic)
  • 만약 중첩된다면 계속 곱해짐(그 전의 'M' width를 기준으로 하기 때문에)
• rem: 가장 근본(16px)기준으로 배수함. 
  • 당연히 중첩 상관 없음. 부모와 상관x

줌할때는 dynamic / static 상관 없음.

 

 floating 

• float: 값 (left, right..

사진을 글씨와 같이 취급하여 특정 방향에 배치하는 형식( texts wrap around the image)

사진이 끝나면 감싸는 형태

• clear: 값

설정한 방향(left, right)의 margin이 clear하도록 (그 방향으로는 wrapping 불가)

설정해둔 오른쪽 방향으로 감싸지 않고 일정한 폭을 유지하도록(clear)설정됨.

.computer{
  clear: right;
  float:right;
  margin-left: 30px;
}