텍스트 정렬
CSS 텍스트 정렬은 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬이 있다. 모든 요소의 기본 정렬은 왼쪽 정렬이다.
왼쪽 정렬
.left {
text-align: left;
}
오른쪽 정렬
.right {
text-align: right;
}가운데 정렬
.center {
text-align: center;
}
span 태그는 inline-element이기 때문에 텍스트 정렬이 적용되지 않는다.
Indent
HTML content안에 아무리 스페이스로 들여쓰기 공백을 줘도 실제 브라우저에서는 적용이 되지 않는다.
<p> 자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다</p>(코드)
(브라우저)
따라서 들여쓰기 공백을 적용하려면 스페이스바를 의미하는 코드나 CSS의 text-indent를 이용해준다
<p> 들여쓰기 들여쓰기</p>.indent {
text-indent: 20px;
}blockquote라는 태그는 인용구문을 넣을 때 쓰는 태그이다. 양쪽 여백을 넣은 기본 스타일이 브라우저에서 적용이 된다.
CSS Selector
p.p-tag {
color: red;
}p태그이면서 p-tag 클래스이다.
p#third-line {
color: blue;
}p태그이면서 third-line 아이디이다.
.pre span {
background-color: yellow;
}pre 클래스 내부의 span 태그이다.
물론 이렇게도 가능하다...
.a div .b .pre span {
background-color: yellow;
}a 클래스 내부의 div 내부의 pre 클래스 내부의 span 태그이다.
이렇게도...
div .container li.first-list {
color: red;
}div 내부의 container 클래스 내부의 li태그 이면서 first-list 클래스를 가진 요소가 스타일링 된다.
display: none
CSS display 속성에 none값을 넣어주면 해당 요소가 사라지게 할 수 있다. 검색창 등 많이 사용되는 기법이다.
.hide {
display: none;
}first-child, last-child, nth:child
CSS 선택자 중에서 해당 태그의 첫번째, 마지막 순서의 요소, 혹은 홀수, 짝수번째 요소를 구별할 수 있는 표기법이 있다. selector 표기법이라고 한다. li태그에 사용할 수 있다.
selector:first-child {
/*첫번째*/
}
selector:last-child {
/*마지막*/
}
selector:nth-child(odd) {
/*홀수*/
}
selector:nth-child(even) {
/*짝수*/
}
rowspan, colspan
rowspan은 행 병합, colspan은 열 병합이다. 마지막으로 절대 헷갈리지 말자
Input
input, textarea, button 요소들은 inline element라서 한 줄에 출력된다. 보기 좋지 않으므로 div태그로 감싸주는것이 좋다. 실제 사이트를 개발할때 사용하는 방식이다.
<div class="input-wrap">
<input type="text" placeholder="학번">
</div>Selector의 속성에 스타일 입히기
예를들어 input element에 placeholder라는 속성이 있다.
<input type="text" placeholder="place holder">
만약 placeholder의 색을 조금 더 연한 회색으로 바꿔주고 싶다면?
input::placeholder {
color: #bbb; /*더 연한 회색*/
}혹은 input type이 text인 input element에만 스타일을 입히고 싶다면?
input[type="text"] {
color: black;
}position : relative
특별한 방식으로 위치가 지정된것은 아니다. top, left, right, bottom 속성이 있어야 원래의 위치에서 이동할 수 있다.
.relative1 {
position:relative;
}
.relative2 {
position: relative;
top: 10px;
left: 20px;
}relative2는 relative1보다 위에서 10px, 왼쪽에서 20px 떨어진 위치에 있다.
position: absolute
부모 요소중 가장 가까운 relative, absolute, fixed 요소가 있으면 그 부모를 기준으로 움직인다.
.input {
top: 40px;
right: 40px;
}클래스가 input인 요소는 position이 relative, absolute, fixed인 부모 요소의 위치에 대해 오른쪽에서 40px 만큼, 위에서 40px 만큼 떨어진 곳에 위치한다.
position : fixed
fixed는 부모 요소의 유무와 상관없이, 오로지 브라우저의 화면 크기만큼, 화면 내에서 움직인다. 페이지가 스크롤되더라도 같은 곳에 위치한다.
Block, Inline, Inline-Block
Block : 새로운 줄에서 시작해 좌우로 최대한 늘어난다. 따라서 좌, 우측에 다른 요소를 붙여넣을 수 없다.
ex) header, footer, p ,li, table, div, h1
Inline : 말 그대로 좌, 우측에 요소끼리 위치할 수 있다.
ex) span, img, a
display, float 속성을 활용해 얼마든지 block과 inline 속성을 바꿀 수 있다.
span {
display: block;
}Inline-Block : inline-block 값은 앞서 정리했단 inline 속성과 block 속성의 특성을 모두 합한 것이라고 볼 수 있다. 각 엘리먼트의 좌, 우로 나란히 배치될 수 있으며 width와 height를 사용해 엘리먼트의 크기를 커스터마이징 할 수 있다
Float
페이지 전체의 레이아웃을 잡을 때 사용되거나, 이미지 주변을 텍스트로 감싸기 위한 속성이다. 하지만 float를 사용한 요소가 부모를 벗어나는 오류가 생길 수 있으므로 주의해야 한다. 이를 해결하기위해 떠있는 엘리먼트를 비우기 위해 clear 속성을 사용하거나 외부 요소의 CSS에 overflow: hidden; 속성을 주기도 한다.
img {
float: left;
height: 200px;
}
img {
float: right;
height: 200px;
}