-
[CSS] CSS의 모든 것 - (3)Link, List, Table, Display, Width, Positon, OverflowSTUDY/HTML.CSS.JS 2021. 3. 13. 19:28
- CSS Links
- Lists
- Tables
- Layout- Display Property
- Layout - width and max-width
- Layout - The position
- Layout - Overflow
CSS Links
Link도 CSS 속성으로 스타일을 지정할 수 있다.
- a : link - 방문하지 않은 일반 링크
- a : visited - 방문한 링크
- a : hover - 사용자가 링크에 마우스를 올려둘 때
- a : active - 클릭하는 순간의 링크
ex)
a:link { color: red; } a:visited { color: green; }text-decoration 속성 : 링크의 밑줄을 제거할 때 사용하는 속성
Syntax
text-decoration: none;
background-color 속성 : 링크의 배경색을 지정할 때 사용
link button
링크를 버튼 형태로 만들 수도 있다.
ex)
<style> a:link, a:visited{ background-color:white; color:black; border:2px solid green; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; } a:hover { background-color: green; color:white; } </style> <body> <a href="default.asp" target="_blank">This is a link</a> </body>
link button - 일반(왼), hover(오)
CSS Lists
HTML에는 두가지 종류의 리스트가 존재한다. (<ul>과 <ol>)
CSS의 속성을 이용해 리스트의 스타일을 적용할 수 있다.
Ordered List의 marker를 다른 스타일로 지정할 수 있고, Unordered List의 marker 또한 다른 스타일로 적용할 수 있다.
List의 Marker로 이미지를 적용할 수도 있다. 뿐만아니라, 리스트나 리스트의 아이템에 배경색을 적용할 수도 있다.
1 ) list-style-type 속성
리스트의 marker를 지정할 수 있는 속성이다.
circle, square, upper-roman, lower-alpha 등의 스타일을 지정할 수 있다.
Syntax
list-style-type : circle
list-style-type : none;을 지정하는 경우, marker 와 글머리 기호를 제거할 수 있다.
리스트는 default margin과 padding을 가지고 있기 때문에, margin과 padding까지 없애고 싶다면, 따로
margin:0; padding:0;으로 지정해주어야 한다.
2) list-style-image 속성
marker에 이미지를 지정할 수 있는 속성이다.
Syntax
list-style-image : url('sqpurple.gif')
3) list-style-position 속성
marker의 위치(글머리 기호)를 지정할 수 있는 속성이다.
'list-style-position: outside;'는 글머리 기호가 리스트 아이템의 밖에 위치하는 것을 의미한다.
리스트의 항목의 각 줄의 시작 부분이 세로로 정렬된다.
list-style-outside:outside (default) 'list-style-position: inside;''는 글머리 기호가 리스트 아이템의 안에 위치하는 것을 의미한디.
리스트 아이템의 일부이기 때문에, 처음에 있는 텍스트를 push한다.
list-style-position: inside; 4) list-style
list-style속성을 사용하여, 리스트의 속성들을 한번에 사용할 수 있다.
ul { list-style: square inside url("sqpurple.gif");}list-style-type , list-style-position, list-style-image 순으로 사용한다.
(만약 하나의 속성이 빠진다면, default 값이 지정될 것이다.)
CSS Tables
1) border
table, th, td { border: 1px solid black; }- border-collapse
table, th, td 이렇게 두줄로 보이는 이유는, border 속성을 table, th, td에 적용했기 때문이다. table과 th, td가 각각 border를 가지고 있게되기 때문이다. 이를 아래처럼 한 줄로 보이게 하려면, border-collapse:collapse; 속성을 사용하면 된다.
border-collapse 만약 아래와 같이, 밖에만 테두리를 두고 싶으면 border 속성을 table에만 적용하면 된다.
(e.g. table {border:1px solid black;})
table에만 border 적용 2) size
width와 height 속성을 통해 테이블의 크기를 정의할 수 있다.
(table이 전체 스크린에 보여지게 하고 싶다면, width : 100%를 적용하면 된다.)
3) align
text-align 속성을 통해, <th>, <td>의 내용을 왼쪽/가운데/오른쪽 정렬(수평정렬)을 할 수 있다.
text-align:center;
vertical-align 속성을 통해, <th>,<td>의 내용을 위/중앙/아래 정렬(수직정렬)을 할 수 있다.
vertical-align:bottom;
4) style
- padding
padding 속성은 테이블의 테두리와 테이블 안의 내용 사이의 공간을 지정한다.
-horizontal Divider
border-bottom 속성을 통해 <th>, <td>의 가로 구분선을 지정한다.
border-bottom: 1px solid #ddd;
border-bottom -hoverable Table
:hover 선택자를 사용하여, 테이블의 <tr> 에 마우스를 올렸을 때의 하이라이트 표시를 할 수 있다.
-striped Table
아래와 같이 줄무늬 색상의 테이블을 만들려면, nth-child() 선택자를 사용하여, 짝수와 홀수 행에 background-color를 칠하면 된다.
//짝수 행에만 색을 칠함. tr:nth-child(even) {background-color: #f2f2f2;}5) Responsive Table
반응형 테이블은, 전체 테이블의 내용을 표시하기에 스크린이 작은 경우, 세로로 된 스크롤 바를 보여준다.
<table>을 <div>와 같은 컨테이너 요소에 overflow-x:auto; 속성을 추가하여 둘러쌓아 사용한다.
<div style="overflow-x:auto;"> <table> .. content.. </table> </div>
CSS Layout - The display Property
display 속성은 layout을 조절하는데 가장 중요한 CSS 속성이다.
display 속성은 요소들의 표시 여부와 방법을 정의한다.
모든 HTML 요소들은 각 요소에 따라 정해진 default display 값이 존재한다. 대부분의 default display 요소는 block 혹은 inline 이다.
Block-level Element
블록 단위 요소는 항상 줄바꿈을 한 후, 새로운 줄에서 시작하고 사용 가능한 최대 넓이를 사용한다.
너비와 높이를 지정할 수 있다.
블록 단위 요소의 예)
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
- <ul>, <li>
Inline Element
인라인 요소들은 새로운 줄에서 시작하지 않고, 딱 필요한 만큼만의 너비만을 사용한다.
너비와 높이를 지정할 수 없다.
인라인 요소의 예)
(대부분 텍스트와 이미지에 관련된 태그들)
- <span>
- <a>
- <img>
- <b>
- <i>
- <input>
Block-level Element와 Inline Element 비교
블록 단위 요소로는 <div>, 인라인 요소로는 <span>이 있다.
둘의 차이는 아래와 같다.
블록 단위요소는 가능한 가로 전체를 차지하고, 인라인 요소는 딱 필요한 만큼만의 너비만을 차지한다.
div와 span의 차이 div와 span에 각각 width:50px;를 준 결과이다. div는 높이의 변화가 존재하지만, span은 존재하지 않음을 확인할 수 있다.
Default Display 변경하기
위에서 블록 단위 요소와 인라인 요소에 대해 알아보았다.
(div 태그는 블록단위 요소이고, span은 인라인 요소이다.)
display 속성은 여러가지 종류가 있다.
block, inline, none, table, table-cell, inline-block 등이 있다.
display 속성을 이용하여, 인라인 요소를 블록 단위 요소로 변경하거나, 혹은 반대로 바꿀 수 있다.
예시)
div에 display:inline;으로 변경하면 아래와 같은 결과가 나온다. 블록 단위 요소인 div를 inline 처럼 화면에 표시해준다.
반대로, span에 display:block;으로 변경하면 아래와 같은 결과가 나온다.
이번에는 div에 display:none;을 적용했다. 결과는 아래와 같이 아무것도 보이지 않는다.
display:none;는 JavaScript에서 삭제나 재생성 없이 요소들을 보여주거나 숨길때 가장 일반적으로 사용된다.
none 속성을 사용하면, 어떤 식으로 디자인을 했던지 상관 없이 모니터 상에 보여지지 않는다.
<script> 태그는 display:none;을 default로 사용한다.
display:none vs visibility:hidden
요소를 보여지지 않게 할때, display:none을 사용할 수 있다. 요소는 숨겨지고, 요소가 아예 그 위치에 존재하지 않는 것처럼 페이지가 표시된다.
visibility:hidden 또한 요소를 숨긴다. 하지만, 요소는 보여질때나 보여지지 않을 때나 모두 동일한 공간을 차지하여, 레이아웃에 영향을 미친다.
아래는 <h1> 중 하나의 클래스를 hidden처리한 결과이다.
아래와 같이 화면에 보이지는 않지만 여전히 공간을 차지하고 있는 것을 볼 수 있다.
visibility:hidden display:inline-block
display:inline과 display:inline-block의 가장 큰 차이점은 inline-block이 요소의 높이와 너비를 설정할 수 있다는 것이다.
또한 inline-block은 위와 아래의 margin, padding을 유지하거나 지정할 수 있지만, inline은 그렇지 않다.
display: block;과 비교하면, inline-block은 line-break를 포함하지 않는다. 그래서 요소들이 요소들의 바로 옆에 위치할 수 있다.
네비게이션 링크를 만들 때, 이 display:inline-block을 사용하는 것이 일반적이다.
CSS Layout - width and max-width
위에서 잠시 언급했듯이, 블록 단위 요소는 높이와 너비를 지정해줄 수 있다.
블록 단위 요소에 width를 지정해 주면, 컨테이너의 끝까지 블록단위요소가 뻗어지는 것을 막을 수 있다.
그리고 margin:auto; 로 설정하면, 컨테이너 내에서 요소를 중앙에 배치할 수 있다.
요소는 지정된 너비를 차지한 후에는, 남은 공간은 양쪽에 균등하게 분할된다.
div에서 만약, 스크린의 크기가 요소의 width보다 작아지면, 스크롤바가 생기게 된다.
이때 width 대신, max-width를 사용하면 이러한 문제를 해결할 수 있다.
max-width를 사용하면 작은 화면이나 기기에서 브라우저가 페이지를 더 적절하게 핸들링할 수 있게 해준다.
자세한 예시는 이곳을 참고.
CSS Layout - The position Property
position 속성은 요소에 사용될 위치 지정 방법을 지정하는 데 사용된다.
position에는 아래의 5가지 값이 존재한다. 아래의 속성들은 position 속성을 먼저 설정하지 않는 다면 동작하지 않는다.
그리고 이 값들은 위치에 따라 다르게 동작한다.
- static
- relative
- fixed
- absolute
- sticky
1) position: static;
HTML의 요소들은 기본적으로 정적(static)으로 배치된다.
Static 위치 요소는 위, 아래, 왼쪽, 오른쪽 속성의 영향을 받지 않는다.
position: static;인 요소들은 특별한 방식으로 위치되지 않고, 페이지의 일반적인 흐름에 따라 배치된다.
div.static { position: static; border: 3px solid #73AD21; }2) position: relative;
position: relative;는 일반적인 위치와 관련있는 위치 배치이다.
위, 아래, 왼쪽, 오른쪽 속성을 사용해 위치 조절이 가능하다.
아래와 같이, left:30px를 지정하면, 왼쪽에서 30px 떨어진곳에 div가 위치하게 된다.
div.relative { position: relative; left: 30px; border: 3px solid #73AD21; }3) position:fixed;
fixed를 사용하면, 페이지가 스크롤 되더라도, 요소가 항상 그 자리에 위치한다. 메뉴바나 로그인 메뉴 등과 같은 걸 생각하면 된다.
위, 아래, 왼쪽, 오른쪽 속성을 사용해 위치 조절이 가능하다.
4) position: absolute;
absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.
자세한 예시는 이곳을 참고.
5) position: sticky;
sticky는 스크롤 위치에 따라, relative와 fixed 사이를 토글한다. (토글: 하나의 설정값을 다른 값으로 전환)
top, right, bottom, left 중 하나는 반드시 지정해야 한다.
동작은 이곳에서 확인.
Overlapping Elements
우리는 요소들을 화면에 배치할 때, 요소들을 겹쳐서 배치할 수 있다.
z-index 속성은 요소들이 쌓이는(겹치는) 순서를 정의한다. (어떤 요소가 앞에 오고, 뒤에 올지 등)
요소들은 양수나 음수의 값을 가질수 있다.
음수면 뒤에 위치한다.
예시)
img { position: absolute; left: 0px; top: 0px; z-index: -1; }만약, 두개의 요소를 z-index 속성을 사용하지 않고 겹치면 겹쳐져서 보이지 않고, 먼저 쓰인 HTML 코드가 보여진다.
Positionint Text In an Image
아래와 같이 사진 위에 텍스트의 위치를 조절하려면 이렇게 하면 된다.
<style> .container { position: relative; } .topleft { position: absolute; top: 8px; left: 16px; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.3; } </style> . . <div class="container"> <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300"> <div class="topleft">Top Left</div> </div>
CSS Layout - Overflow
overflow 속성은 콘텐츠가 너무 커 영역에 맞지 않을 때, 이를 조절하는 속성이다.
지정된 영역에 맞추기 위해, 내용을 자르거나 스크롤 막대를 추가할지 여부를 정해 조절한다.
overflow 속성은 오직 블록 단위 요소에서만 작동하고, 지정된 높이를 필요로 한다.
- visible : Default. 오버플로우 되어도 자르지 않는다. 영역 밖에서 콘텐츠가 랜더링 된다. (그냥 영역 밖에 삐져나온채로 보이게됨)
- hidden : 오버플로우를 자른다. 그리고 잘려진 나머지 부분은 보이지 않는다.
- scroll : 오버플로우를 자르고, 잘려진 나머지 부분을 스크롤 바를 통해 볼 수 있다.
- auto : scroll과 유사하다. 하지만, 스크롤 바를 오직 필요할 때만 추가한다.
visible / hidden / scroll overflow-x and overflow-y
overflow-x와 overflow-y는 오버플러우 콘텐츠를 수평으로 표시할지, 수직으로 표시할지, 혹은 둘다 표시할지 결정하는 속성이다.
overflow-x는 콘텐츠의 왼쪽과 오른쪽의 내용이 넘칠 때 어떻게 보여줄지 지정하고,
overflow-y는 위와 아래의 내용이 넘칠 때 어떻게 보여줄지 지정한다.
이 글은 w3school을 참고하여 작성하였습니다.
'STUDY > HTML.CSS.JS' 카테고리의 다른 글