위코드 Pre Course - HTML/CSS 2

어제 제출한 문제중에서 2개 반려됐음;;

 

그리고 거의 끝나가니까 블로그 정리가 과제로 주어지는데 어제 그것도 모르고 일단 푼 문제들에서 중요하다 생각한 부분들을 먼저 정리해버렸다;;;

 

이 포스팅에는 과제에서 명시한 내용에 초점을 맞추겠다.

 

Position

• Static
  • static은 기본값으로 위치를 지정하지 않았다 라고 표현한다.

.static {
	position: static;
}

•  Relative
  • relative는 별도의 위치를 지정하지 않는 이상 static과 동일하다.
  • 상대위치가 지정된 요소에 top, right, bottom, left를 사용해서 위치를 조정할 수 있다.

http://ko.learnlayout.com/position.html

.relative1 {
	position: relative;
}
.relative2 {
	position: relative;
	top: -20px;
	left: 20px;
	background-color: white;
	width: 500px;
}

• fixed
  • 페이지가 스크롤되더라도 지정된 위치를 고정한다.
  • 네이버 웹툰에서 웹툰 리모콘 같은 게 예가 될듯

.fixed {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 200px;
	background-color: white;
}

• absolute
  • 가장 가까운 부모 요소의 위치를 기준으로 상대적인 위치를 지정한다.
  • 가까운 부모 요소의 position이 static일 경우 기준으로 삼지않고 다른 요소를 찾는다.

http://ko.learnlayout.com/position.html

.relative {
	position: relative;
	width: 600px;
	height: 400px;
}
.absolute {
 	position: absolute;
	top: 120px;
	right: 0;
	width: 300px;
	height: 200px;
}

 

 

Inline, Block과 Inline-Block

• 기본적으로 제공되는 태그들의 속성을 나타내는 말이지만 사용자가 직접 해당 특성을 태그에 지정해 줄 수 있다.
• 지정해줄 때에는 display 옵션을 사용한다.
  • inline  :  요소를 inline 요소처럼 표시한다.
  • block  :  요소를 block 요소처럼 표시한다.
  • inline-block  :  inline 요소와blcok 요소의 특징을 모두 가지고 있는 요소로 표시한다.
    • inline 요소처럼 줄바꿈이 발생하지 않는다.
    • block 요소처럼 width, height를 지정할 수 있다. 지정하지 않으면 inline처럼 데이터 영역만큼 크기가 잡힘

p {
	display: inline;
}
//block 요소인 <p>태그를 inline 요소처럼 사용할 수 있다. 반대의 경우도 동일함

 

float

• 페이지의 레이아웃을 잡기위한 CSS의 프로퍼티로 같은 목적의 프로퍼티로는 position이나 flex가 있다.
• float를 제어하기위한 프로퍼티들
  • clear
    • left, right, both를 사용가능하다.
    • 겹치거나 떠있는 요소의 위치를 지정해서 서로 떨어뜨려 놓는다.
  • overflow
    • visible(기본), hidden, scroll, auto
    • visible  :  사이즈에 관계없이 일단 표시함
    • hidden  :  부모 요소의 크기를 벗어날 경우 숨김
    • scroll  :  부모 요소의 크기만큼 표시하고 스크롤을 붙여서 나머지를 볼 수 있게 함
    • auto  :  스크롤을 추가 여부를 자동으로 판단함

 

이상 3가지 내용에 대한 정리를 마친다.