CSS
텍스트 정렬
모든 요소의 기본 정렬은 왼쪽 정렬이다.
span 태그는 inline-element이기 때문에
span이 차지하는 영역은 "span의 오른쪽 정렬"만큼의 길이밖에 안된다.
Indent
자바스크립트는 다음에 스페이스를 10개를 추가해도
하나의 스페이스밖에 적용되지 않는다.
이럴 때는 스페이스를 의미하는 코드를 넣어주어야 한다.
가 스페이스를 의미하는 코드이다.
다음과 같이 스페이스를 넣는다.
<p>스페이스 넣는 예제</p>밑줄
p {
text-decoration: underline;
}위의 코드는 p 태그에 밑줄을 치는 css이다.
그런데 위의 코드로는 밑줄의 두께나 색깔 등의 스타일을 내가 원하는대로 만들기가 어렵다.
이럴 때는 border-bottom으로 내가 원하는 스타일로 밑줄을 그어줄 수 있다.
css 문법으로만 볼 때는 밑줄이 아니고 아래 테두리를 만드는 코드이지만 내가 원하는 대로 디자인이 가능하기 때문에 대부분의 개발자는 border-bottom으로 구현하는 것을 선호한다.
Block vs Inline
대부분의 HTML element는 block 요소이다.
block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻이다.
block 요소와 성질이 반대인 inline 요소도 있다.
inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다.
사실 css에서는 특정 성질을 가진 아무 태그나 사용해도 결국 CSS를 통해 얼마든지 그 성질을 바꿀 수 있다.
아무리 block 요소의 성질을 가진 p 태그도 css를 사용해서 inline 스타일로 변경하면 span 태그와 똑같은 디자인이 된다.
inline 성질을 갖도록 하는 CSS property는 display와 float이 있다.
.inline-p {
display: inline-block;
}
.float-left {
float: left;
}
.float-right {
float: right;
}해당 property에 위와 같은 값을 부여하면,
요소 옆에 요소가 위치하는 inline 성질로 변하게 된다.
반대로 원래는 inline 성질을 가진 태그를 block으로 바꾸게 할 수도 있다.
none
.hide {
display: none;
}index.html의 21줄을 보면 html 코드는 존재하는데 화면에는 보이지 않는다.
hide 클래스를 부여한 스타일 때문에 보이지 않는 것인데, hide라는 클래스를 제거하면 해당 요소가 다시 보일 것이다.
display에 none이라는 값을 주면, 해당 요소는 화면에서 보이지 않는다.
이런 요소를 작성하는 이유는 interactive한 웹을 구현할 수 있기 때문이다.
네이버 검색창에 내가 검색하려는 단어를 입력한 순간, 아래에 길게 관련 목록이 뜨는 것을 볼 수 있다.
원래는 해당 영역이 display: none;으로 보이지 않다가 텍스트를 입력하는 순간, JavaScript가 검색 목록 요소에 다른 클래스로 교체한다.
아마 그 새로운 클래스에는 display: block;이라는 값이 있었을 것이다.
이렇게 클래스 이름에 따라 요소에 display: none <-> block이 있었다가 없었다가 하면서 요소를 보이게/안보이게 할 수 있는 것이다.
