position 속성 : 배치 방법 지정하기
1) static : 기본값, 이 상태에서는 요소를 뭐 top, bottom, left, right 적용 자체가 불가능하다. (float 속성 사용은가능)
2) relative: static 처럼 나열 순서대로 배치되나 드디어 top, bottom, left, right 적용을 할 수 있어서 이 좌표값을 사용해 위치를 지정할 수가 있다. 문서 흐름과 관계하여 원래 표시되었어야 할 위치?(static) 기준으로 left 얼마, top 얼마 이렇게 표시된다.
주의
top - moves the element down.
(탑은 요소를 아래로 이동한다. top:20px; 이면 위에서 아래로 20px로 내려앉는것)
bottom - moves the element up. (바텀은 요소를 위로 이동한다)
left - moves the element right. (레프트는 요소를 오른쪽으로 이동한다)
right - moves the element left. (라이트는 요소를 왼쪽으로 이동한다)
3) absolute: 앱솔루트.. 보드카.. position:absolute; 를 사용하면 문서 흐름과 상관없이 top, bottom, left, right 속성값을 이용해 요소를 원하는 위치에 배치할 수 있다. 하지만 이 경우 기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position 속성이 relative 인 요소이다. 앱솔루트 사용하려면 그 부모 position을 relative 로 지정해 놓고 사용해야 한다.
4) fixed: absolute 와 같이 위치를 좌표로 결정하지만 기준은 부모 요소가 아닌 브라우저 창이 기준이 된다.
position: fixed; 를 사용하기 좋은데는 navigation bar 나 footer 부분 정도 일것이다. 그런데 position:fixed; 를 쓰고 결과 화면을 보니 그 부분만 안나오더라? 이럴 때 width 값을 지정했는지 확인하고, 두번째로 top, bottom, left, right 이 요소를 같이 적용해주지 않으면 아예 안보이더라.
여튼 이렇게 하면 같은 자리에 고정되어서 스크롤을 해도 고대로 이다.
클릭 : About css positioning
z-index : 요소 쌓는 순서 정하기
.box-top {
background-color: Aquamarine;
position: relative;
z-index: 2;
}
.box-bottom {
background-color: DeepSkyBlue;
position: absolute;
top: 20px;
left: 50px;
z-index: 1;
}
요소 위에 요소를 쌓을 때 쌓는 순서를 지정하는 것. z-index 값이 작을 수록 아래에 쌓이고 값이 클수록 값이 작은 요소보다 위에 쌓인다. z-index 값을 명시하지 않을 경우, 웹 문서에 맨 먼저 삽입하는 요소가 z-index 값 1을 가지고 그 후 삽입하는 요소들은 그 값이 커진다.
닥치고 무조건 맨앞에 표시해야 한다 이러면 z-index:999; 이렇게 사용하기도 한단다.
display 속성
1) display: inline;
-
< strong >< span >< img >< em >< a > 태그 같은 아이들이 인라인 태그들이다. 얘네들은 딱 자기 크기만큼만 사이즈를 가지고 있고 즉 내용 표시에 필요한 공간만 차지하고 각 요소 뒤에 새로운 line 이 필요하지 않다. 옆으로 죽 늘어선다 이말이야. 그리고 width 값과 height 값을 명시할 수 없다. 높이와 폭 설정이 안된다 이말?
-
hoxy.. 블록 요소 < h1 > 같은 애들을 display:inline; 이렇게 해주면 옆으로 늘어서겠지? 근데 margin 값이라든가 높이 너비 값을 제대로 설정해 줄 수가 없어요.. 이럴때 쓰라고 display: inline-block; 이 있다.
2) display: block;
-
< div >< p >< h1~h6 >< footer > 등등 이런 아이들이 블록레벨 태그들이다. 기본적으로 페이지의 전체 너비를 채우지만, 그 너비 width 속성도 설정이 가능하다. 달리 명시되지 않는 한 높이의 경우는 그 내용을 수용하는데 필요한 높이만을 제공한다.
-
인라인 태그를 display: block; 이렇게 한다면 화면의 너비 폭을 채우지 못하더라도 그 양면에 컨텐츠가 없는 자체 라인으로 표시되게 된다.
3) display: inline-block;
-
인라인 요소와 블록 요소의 특징을 결합함. 서로 옆에 나타날 수 있으며 (inline), 폭과 높이 특성을 사용하여 치수를 지정할 수 있다.
-
이미지는 기본 인라인 블록 요소의 좋은 예가 될 수 있다. 요소를 인라인 레벨로 배치하면서, 내용에는 블록레벨 속성을 지정하고 싶을 떄 사용한다.
4) display: none;
- 해당 요소를 화면에서 아예 없앰, 요소 자리 자체가 없다. visibility: hidden; 속성과 다르다! 저번 포스팅 참고!
float 속성
웹 요소를 문서 위에 (왼쪽 또는 오른쪽 구석에 요소가 배치되게) 떠 있게 만든다.
주로 왼쪽에 이미지, 오른쪽에 텍스트 이렇게 나란히 표시해 주고자 할 때 사용한다. 이미지와 텍스트의 적당한 간격을 유지하기 위해 margin-right 혹은 left 도 사용할 수 있겠지.
.boxes {
width: 120px;
height: 70px;
}
.box-bottom {
background-color: DeepSkyBlue;
float: right;
}
플로팅된 요소는 반드시 width 값이 지정되어 있어야 한다. 그렇지 않으면 요소는 포함된 요소의 전체 요소 폭을 가정하고 float 값을 변경해도 눈에 보이는 결과가 나오지 않게 된다.
clear 속성 - float 속성 해제하기
-
float 속성은 여러 개의 요소를 동시에 띄울 수 있다. 하지만 각각의 float 요소들의 높이가 제각각 이라면 페이지의 레이아웃에 영향을 미칠 것이다. 요소들이 서로 부딫힐 수 있고 어떤 요소가 왼쪽 또는 오른쪽으로 가는데 제한을 받을 수 있다.
-
왜냐하면 float 속성을 이용해 페이지 요소를 왼쪽, 오른쪽으로 배치하면 그 다음에 넣는 다른 요소들에게도 똑같은 속성이 전달되기 떄문이다.
그것이 이제 더 유용하지 않다 라고 알려줄 때 쓰는 속성이 clear 속성이다. -
float: left; 로 왼쪽으로 배치했다면 clear: left; 로 종료하고 right 도 마찬가지겠지.
-
float 속성 값이 left 인지 right 인지와 상관없이 무조건 기본 상태로 되돌리고 싶다면 clear:both; 라고 하면 된다.
color
코드카데미를 통해 실습은 완료했지만 딱히 중요하다 느끼지 못했다.
그 속성값이 네개가 뜨는데 제일 마지막 속성값이 의미하는게 투명도? 0에서 1까지 조정 가능하고 1은 제일 불투명하고 0에 가까울 수록 투명해진다는거 정도?
(아래 코드카데미 color 파트 summary)
There are four ways to represent color in CSS:
-
Named colors — there are 147 named colors, which you can review here.
-
Hexadecimal or hex colors
Hexadecimal is a number system with has sixteen digits, 0 to 9 followed by “A” to “F”.
Hex values always begin with # and specify values of red, blue and green using hexademical numbers such as #23F41A.: 6 자리 숫자가 있는 숫자 시스템으로 0에서 9까지 이어지고 "A"에서 "F"까지 이어집니다. 헥스 값은 항상 #로 시작하여 # 23F41A와 같은 육각형 숫자를 사용하여 빨간색, 파란색 및 녹색 값을 지정합니다.
-
RGB
RGB colors use the rgb() syntax with one value for red, one value for blue and one value for green.
RGB values range from 0 to 255 and look like this: rgb(7, 210, 50).: RGB 색상은 Rgb() 구문을 사용하여 빨간색에 대해 하나의 값, 파란색에 대해 하나의 값, 녹색에 대해 하나의 값을 사용합니다.
RGB 값은 0에서 255까지이며 다음과 같이 보입니다. : rgb (7, 210, 50). -
HSL
HSL stands for hue (the color itself), saturation (the intensity of the color), and lightness (how light or dark a color is).
Hue ranges from 0 to 360 and saturation and lightness are both represented as percentages like this: hsl(200, 20%, 50%).: HSL은 색조(색채 자체), 포화(색채의 강도), 밝기(색채가 얼마나 가볍거나 어두운가)를 의미합니다. Hue의 범위는 0에서 360이며 포화도와 광도는 모두 다음과 같은 백분율로 표시됩니다. : hsl (200, 20%, 50%)
-
You can add opacity to color in RGB and HSL by adding a fourth value, a, which is represented as a percentage.
: RGB와 HSL의 색상에 불투명도를 추가할 수 있는데, 이는 백분율로 표현되는 네 번째 값인 a를 추가하면 됩니다.
타이포그래피
코드카데미를 통해서 공부. font-family 로 글꼴을 지정하는 방법에 대한 설명. 폰트 이름이 예를 들어 뭐 space mono 이다. 이러면 font-family: 'space mono' 이런 식으로 따옴표를 표시해준다고 한다. 근데 어디서는 그냥 따옴표 또는 큰 따옴표 .. 뭐가 맞는겨..
자바스크립트에서 작은따옴표쓰니까 여기서는 큰따옴표쓰는게 헷갈리지 않는 방법일까?
그리고 자동차가 예비타이어를 달고 다니듯 (배기 튜닝하면 일부러 때야한다..) 첫번째 폰트가 다른 사용자들에게 안보여질 경우를 대비해서 두번째 세번째 까지 표시 해 준다.
그리고 구글 웹 폰트를 통해 글꼴을 바꿀 수 있고 < head > 태그 내에 < link > 속성을 이용하여 넣는 방법과 css 파일내에 @font 이런 식으로 넣는 방법이 있고 파일 디렉토리를 이용해서 올리는 방법도 있는데 아 뭐 거까지 아냐 다음에 알자 그거는.
