일단.. 오늘 과제하면서 기억하고 싶은 부분들 정리를 해보겠다...
✔ Block vs. Inline
물론 대부분 inline 과 block 성질에 의해 태그가 결정되지만,
아무 태그나 사용해도 결국은 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 성질로 변하게 됩니다.
.block-span {
display: block;
}위의 CSS로 <span>은 <p> 태그와 똑같은 성질을 갖게 되었습니다.
.hide {
display: none;
}hide라는 클래스를 제거하면 해당 요소가 다시 보일 것 입니다.
display에 none 이라는 값을 주면, 해당 요소는 화면에서 보이지 않습니다.
여러 이유중 하나는 interactive 한 웹을 구현할 수 있기 때문입니다.
위의 이미지를 참고해서 보면, 원래는 해당 영역이 display: none; 으로 보이지 않다가, 텍스트를 입력하는 순간, JavaScript가 검색 목록 요소에 다른 클래스로 교체할 것입니다. 아마 그 새로운 클래스에는 display: block; 이라는 값이 있었을 것입니다. 이렇게 클래스 이름에 따라 요소에 display: none <-> block 이 있었다가 없었다가 하면서 요소를 보이게/안보이게 할 수 있는 것입니다.
✔ margin
block 요소일 때 width 값을 주면 더이상 늘어나지 않게됩니다.
이 때 margin에 auto로 설정하면 가로 중앙에 오게 할 수 있습니다.
.center {
margin: 20px auto;
}1개 값이 있을 때는 사방 모두 같은 margin을 준다는 의미였고,
4개 값이 있을 때는 위/오/아래/왼 순서로 margin을 준다는 의미였습니다.
이렇게 2개의 값만 있을 때의 의미는 첫 번째는 위, 아래의 margin이고 두 번째는 왼, 오른쪽에 주는 margin이라는 뜻입니다.
✔ list
*아무 스타일도 넣고 싶지 않다고 li태그만 사용하면 안 됩니다.
목록은 항상 ul이나 ol태그로 감싸야 합니다.
ul {
list-style: none;
border-left: 3px solid black;
}
위의 이미지에서 세로 줄과 목록 아이템 공간이 떨어져 있는 이유는, 브라우저 자체내의 margin, padding 등을 디폴트 값으로 추가해놨기 때문. 해당 태그에 덮어씌워 디폴트 스타일을 제거해주면 된다. (예: padding: 0 0 0 15px;)
li {
padding-bottom: 10px;
}이 코드까지 추가해주면,
padding-bottom 대신 margin-bottom을 사용하여도 똑같은 결과가 나옵니다.
li는 테두리를 갖고 있지 않으므로, 여백이 padding 쪽인지, margin 쪽인지 알기 어렵습니다. 그냥 <li>리스트 아이템 아래에 여백만 추가해주면 됩니다.
li:last-child {
padding-bottom: 0;
}위 스타일을 통하여 리스트 마지막 아이템인 'search'아래의 여백을 없앴다.
li:nth-child(odd) {
background: red;
}li:nth-child(even) {
background: blue;
}
위 스타일을 추가하게 되면, 아래의 이미지와 같은 결과를 확인할 수 있다.
홀수는 빨강, 짝수는 파랑 배경색을 가지게 됐다.
✔ table
<table>, <thead>, <tbody>, <tr>, <th>, <td> 등
tr은 table row의 줄임말
td는 table data의 줄임말
th는 table heading의 줄임말
세로 셀끼리도, 가로 셀끼리도 병합을 할 수 있다.
<td>나 <th>태그에 colspan, rowspan이라는 attribute를 추가해서 구현할 수 있습니다.
rowspan은 행(가로)을 병합, colspan은 열(세로)을 병합합니다.
행열 대체 왜이렇게 헷갈리는지.. 내 스스로의 이해를 돕기위해 이미지 첨부했음.
✔ input
placeholder는 attribute인데 css의 selector에 어떻게 표현해줘야 할까나?
input::placeholder {
color: #bbb;
}콜론 두개를 붙여서 selector를 만들어줄 수 있습니다.
슬픈 소식을 전하자면... attribute를 표현한다고 모두 콜론을 쓰는 것은 아닙니다. 그렇다면 언제일 때만 콜론 두개로 셀렉터를 만들어줄 수 있는거지?
input 세개 중에서 text 타입인 input만 스타일을 입히고 싶다면,
아래와 같이 표현합니다.
input[type="text"] {
}✔ position
position: relative; 자체로는 특별한 의미가 없습니다.
딱히 어느 위치로 이동하지는 않습니다.
위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있습니다.
top, right, bottom, left는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티 입니다.
.relative {
position: relative;
}
.top-20 {
top: -20px;
left: 30px;
}div.relative.top-20은 위로 20px 이동하고, 왼쪽에서 30px만큼 떨어졌습니다.
마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라가게 됩니다.
position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있습니다.
어떤 기준으로 절대적이냐 하면, 특정 부모에 대해 절대적으로 움직이게 됩니다.
부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 됩니다.
일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여하면 됩니다.
absolute 값을 갖게 되면, 마치 inline-element처럼 내용의 크기만큼만 너비가 생깁니다.
.right-0 {
right: 0;
bottom: 0;
}right: 0; 의 의미는 오른쪽으로부터 0만큼 떨어졌다는 뜻이라
부모의 우측에 딱 붙어서 나왔습니다.
bottom: 0;도 마찬가지입니다.
.right-0에 left:0;을 추가해보세요.
부모의 왼쪽에 0만큼 떨어져있다는 뜻이라서 왼쪽부터 요소가 시작하게 됩니다.
마치 .right-0에 width: 100%;를 준 것과 같은 결과입니다.
fixed는 말그대로 고정됐다는 뜻입니다.
absolute는 relative를 가진 부모가 필요했는데, fixed는 필요없습니다.
fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직입니다.
이전에 내가 만들어본 사이트에서 헤더와 메인이 딱 붙어있어서 <br>로 칸을 욱여넣듯이 만든적이 있었는데..ㅎㅎㅎ margin에 대해는 알고 있었어도 margin-top, bottom, left, right 에 대해서는 생각도 못해봤던 것 같다.
✔ 레이아웃
<div> 태그에 대해
CSS에서 정보 배치 단위를 정의하기 위해 널리 사용되는 태그가 바로 <div>입니다.
<div> 태그는 만들고 나면 class나 id를 부여하여 각각의 스타일을 적용하게 됩니다.
그러나 id를 적용하면 우선순위가 아주 높다보니 다른 스타일 속성을 쉽게 무력화 시키게 되죠.
영역을 구분해주는 태그들
헤더와 메인 섹션 푸터까지 이렇게 간단하게 나눌 수 있는 거였다니..
float:right; 만 쓰게됐을 때, div element에 비하여 이미지가 커서 바깥으로 튀어나온 것을 볼 수 있다. 그래서 div에 class를 지정해주고 overflow: auto;를 쓰게되면 이미지 크기만큼 element도 커져있음을 확인할 수 있다.
CSS 레이아웃
과제:
1. position 속성 - relative, absolute, fixed
2. inline, inline-block, block 에 대해서
3. float에 대해서
오늘은 이 과제까지만 해야겠다...
나의 답변
- position 속성 - relative, absolute, fixed
position은 문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom, left 와 같은 속성이 요소를 배치할 최종 위치를 결정합니다.
position: relative;는 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 적용하고 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다. 고로, top, right, bottom, left의 값이 주어져야 적용이 되는 속성입니다.
위 이미지를 참고하면, 빨간 박스들이 파란 "Two" 박스가 원래 위치에 있는 것처럼 배치되어있는 것을 확인할 수 있습니다. 자기가 있어야 할 본래 위치에서 주어진 값에 의해 떨어지지만, 다른 요소에게는 영향을 주지 않습니다.
position: absolute;는 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 문서의 원래 위치와 상관없이 위치를 지정할 수 있습니다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정됩니다.
절대적으로 배치된 요소는 흐름에서 제거됩니다. 따라서 다른 요소는 그 요소가 존재하지 않는 것처럼 배치됩니다. 절대적으로 배치된 요소는 가장 가까운 위치 지정 조상(즉, static이 아닌 가장 가까운 조상)을 기준으로 배치됩니다. 그래서 빨간박스 One과 가장 가깝게 위치된 것을 확인할 수 있습니다.
position: fixed;는 absolute와 마찬가지로 원래 위치와 상관없이 위치를 지정할 수 있습니다. absolute와 다른 점은 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다는 것입니다.
스크롤 시에도 파란 One 박스가 고정되어 있음을 확인할 수 있습니다.
- inline, inline-block, block 에 대해서
inline은 대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 차지하고 줄바꿈을 하지 않습니다.
-width/height 적용불가
-margin/padding-top/bottom 적용불가
-line-height를 원하는대로 사용할 수 없다.
(inline 요소 <a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>•••)
inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성입니다. 기본적인 특징은 inline 속성과 비슷한데 (줄바꿈을 하지 않고, 동일한 라인에 작성이 가능) inline속성에서 할 수 없었던 width 와 height 변경 및 line-height를 적용할 수 있는 특징이 있습니다.
-width/height 적용 가능
-margin/padding-top/bottom 적용 가능
-line-height 적용 가능
*고려사항
-inline-block 사이에 공백이 생기게 되는데, parent 태그에 font-size: 0를 적용하면 해결된다.
-inline-block 끼리 높이가 안맞을 때 상위 공백이 생기게 되는데 vertical-align: top을 적용하면 해결할 수 있다.
block 속성은 무조건 한 줄을 차지하고, 다음 태그 시에는 무조건 줄바꿈이 적용됩니다. 대표적인 태그로는 div가 있습니다.
(block 요소 <address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>•••)
- float에 대해서
float은 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법입니다. 또한 레이아웃을 잡을 때도 사용하는 기능이기 때문에 꽤 중요합니다. 아울러 해당 이미지의 좌측과 우측 주변으로 텍스트를 둘러싸는 간단한 레이아웃을 구현할 수 있도록 도입되었습니다. 이런 것은 신문 레이아웃에서 볼 수 있는 종류입니다.
left는 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드입니다.
right는 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드입니다.
none은 요소가 부동하지 않아야 함을 나타내는 키워드입니다.
inline-start는 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽.
inline-end는 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.
