Table
<table> 태그
<tr> 태그
<td> 태그
<th> 태그
border로 테이블 선 추가
<td rowspan="2"></td> - 행병합
<td colspan="2"></td> - 열병합
table 태그는 테이블을 표현하는 태그입니다.
저번 포스팅에 배웠던 ul 태그, ol태그, li 태그 기억나시나요?
li 태그는 항상 ul 태그나 ol 태그로 감싸줬었죠?
table 태그도 마찬가지입니다.
table 태그로 항상 테이블을 감싸줘야 합니다.tr 태그는 table row의 약어입니다.
테이블의 row, 즉 행을 나타냅니다.td 태그는 table data의 약어입니다.
말 그래도 테이블 안에 데이터를 나타냅니다.th 태그는 tabel headingd의 약어입니다.
우리는 테이블을 만들게 되면
첫 행과 첫 열에 각 행, 열의 제목을 써주죠?
그럴 때 사용하는 태그입니다.
th 태그를 사용하게 되면 가운데 정렬이 되고 글씨 두께가 두껍게 나타납니다.위의 태그들로 테이블을 생성하게 되면
우리가 흔히 생각하는 표가 만들어지지 않고 테두리가 없는 표가 만들어집니다.
그래서 우리는 테이블을 만들 때, 테두리를 따로 넣어줘야 합니다.
테두리를 넣는 방법은 저번에 공부했었습니다.
css의 border를 이용하면 됩니다.
그럼 표를 한번 만들어 보겠습니다.
</table> <table class="border-table"> <tr> <th class="asm"></th> <th class="asm">1pm</th> <th class="asm">2pm</th> <th class="asm">3pm</th> </tr> <tr> <th class="asm">Gym</th> <td>Dodge ball</td> <td>Kick boxing</td> <td>Sack racing</td> </tr> <tr> <th class="asm">Exercise Room</th> <td>Spinning</td> <td class="colc" colspan="2">Yoga marathon</td> </tr> <tr> <th class="asm">Pool</th> <td class="colc" colspan="3">Water polo</td> </tr> </table>위의 코드는 이런 테이블을 만듭니다.
물론 css로 테두리를 넣어줬답니다.
아래의 코드로 말이죠..border-table { border: 1px solid black; }border-table은 table의 class입니다.
그런데 위의 html 코드를 보시면 다음과 같이 처음 보는 코드가 있을 겁니다.<td class="colc" colspan="2">Yoga marathon</td>colspan="2"가 보이시나요?
colspan을 이용하면 열병합을 할 수 있습니다.
똑같이 행병합도 할 수 있겠죠?
행병합은 rowspan으로 할 수 있답니다.
colspan에 2를 넣었기 때문에 2개의 열을 병합한다는 의미입니다.
Input, Textarea, Button
input, textarea
input 태그와 textarea 태그에 대해 배워보겠습니다.
<input type="text" placeholder="ID"> <input type="password" placeholder="비밀번호"> <input type="number" placeholder="학번">위의 코드는 다음과 같은 결과를 나타냅니다.
우리가 흔하게 보는 거죠? 입력 창입니다.
input 태그를 이용하면 위와 같이 입력 창을 만들 수 있습니다.
input 태그는 시작태그, 끝내그로 구성되지 않습니다.
하나의 태그가 하나의 요소입니다.input 태그의 property에 대해 알아보겠습니다.
먼저 type property입니다.
type="text"
type으로 text를 받는 속성입니다.
이름, ID, 주소, 닉네임 등 어느 텍스트나 입력할 수 있습니다.type="password"
type으로 password를 받는 속성입니다.
text와 비슷한 속성인데 입력하면 까만 원으로 나옵니다.
화면에서는 보이지 않아도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있습니다.type="number"
숫자만 입력할 수 있습니다.
만약 type="number" 으로 핸드폰 번호를 받으려면 "-"는 입력할 수 없습니다.placeholder
placeholder는 도움말을 넣어주는 부분입니다.
아무것도 입력되어 있지 않으면
placeholder에 넣은 값이 보여지게 됩니다.value
만약 input 태그에 미리 값을 세팅해놓고 싶다면,
value라는 attribute를 사용하면 됩니다.
다음은 textarea 태그입니다.
<textarea>소개:</textarea>
textarea 태그를 사용하면 다음과 같이 텍스트박스가 나옵니다.
textarea 태그는 input 태그보다 더 긴 텍스트를 입력받고 싶을 때 사용합니다.(ex. 짧은 방명록, 댓글 등)
위의 사진을 보시면 textarea 우측하단에 두 줄로 표현된 선이 보이실 겁니다.
그걸 이용해서 textarea의 사이즈를 조절할 수가 있는데
이것을 없애기 위해서는 아래의 코드를 사용하시면 됩니다.textarea { resize: none; }소개:라고 보이는 것은 placeholder가 아니라 텍스트입니다.
inline element
input, textarea, button은 모드 inline element입니다.
그렇기 때문에 개발할 때, div 태그로 감싸 영역을 분리하곤 합니다.
아래의 코드처럼 말이죠.
<div class="input-wrap">
<input type="text">
</div>button
<button>클릭가능</button>위처럼 코드를 작성하면 아래와 같이 버튼이 생깁니다.
button 태그를 사용하게 되면,
우리가 웹페이지에서 흔히 볼 수 있는 클릭이 가능한 버튼이 생깁니다.
:hover
새로운 selector를 배워보겠습니다.
hover라는 것은 마우스를 올렸다는 의미입니다.
button:hover { cursor: pointer; opacity: 0.8; }위와 같이 css를 작성하게 되면 어떻게 될까요?
button에 마우스 커서를 올리게 되면 커서가 포인터로 바뀌고,
불투명하게 바뀝니다.cursor라는 속성에 pointer라는 값을 줬고,
opacity를 0.8로 변경했죠.opacity는 요소를 불투명하게 만들어줍니다.
opacity: 1;은 투명하지 않게
opacity: 0;은 투명하게 되서 요소가 보이지 않게 됩니다.
opacity: 0.8은 백분율인데 80%만큼 흐리게 해주게 됩니다.
[CSS] Position -absolute
Position
레이아웃을 만들어주는 position 프로퍼티를 배워보겠습니다.
position: static; position: relative; position: absolute; position: fixed;위 코드에 있는 4개의 position 프로퍼티에 대해 알아보겠습니다.
- static
요소를 일반적인 문서 흐름에 따라 배치합니다.
default값입니다.- relative
요소를 일반적인 문서 흐름에 따라 배치하고,
자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.
따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.- absolute
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레아웃에 공간도 배정하지 않습니다.
대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다.
단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다.
최종 위치는 top, right, bottom, left 값이 지정합니다.- fixed
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다.
대신 뷰포터의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다.
relative
position: relative; 자체로는 특별한 의미가 없습니다.
위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야
원래의 위치에서 이동할 수 있습니다.
top, right, bottom, left는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티입니다.
css 탭을 눌러 css를 확인해보세요.기존의 위치에서 top, right, bottom, left 방향으로 주어진 픽셀만큼 이동했습니다.
top 클래스에 top: 5px;을 줬는데 왜 아래로 이동할까요?
relative는 각각의 방향을 기준으로 태그 안쪽 방향으로 이동합니다.
바깥쪽으로 이동하게 하고 싶으면 5px 대신 -5px을 주면 됩니다.보시면 top 클래스가 left 클래스보다 위에 있는 것을 보실 수 있습니다.
보통 태그는 같은 position이면 나중에 나온 태그가 더 위에 배치됩니다.
그럴 때, z-index를 사용하면 됩니다.
z-index는 태그들이 겹칠 때 누가 더 위로 올라가는지 결정하는 속성입니다.
기본 값은 0이고 top 클래스에 1을 주었기 때문에 left 클래스 위에 위치했습니다.
absolute
relative가 static인 기준으로 주어진 값만큼 움직였다면,
absolute는 position: static 속성을 가지고 있지 않은 조상을 기준으로 웁직입니다.
만약 조상 중에 포지션이 relative, absolute, fixed인 태그가 없다면
body 태그를 기준으로 잡습니다.
absolute 클래스는 relative 클래스 안에 있기 때문에 relative를 기준으로 움직이게 됩니다.
right에 0px, bottom에 0px을 주었기 때문에 우측 아래로 붙은 걸 확인할 수 있습니다.
Position - fixed
fixed는 말그대로 고정됐다는 뜻입니다.
absolute는 relative를 가진 부모가 필요했는데, fixed는 필요없습니다.
fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직입니다.홈페이지의 상단에 메뉴바를 스크롤을 내려도 항상 화면 위에 보이게 하는
header 태그와 같은 태그에 많이 사용합니다.
마우스로 스크롤을 내려도 상단 메뉴바는 항상 뷰포트 상단에 고정됩니다.
물론 위치를 바꾸면 화면 어디에도 고정시킬 수 있답니다.
display: flex
display: flex를 사용하면 다양한 레이아웃을 손쉽게 사용할 수 있습니다.
이전에는 컨텐츠를 정렬하는데에 많은 정성을 쏟아야 했었답니다.그럼 flex를 이용해서 정렬하는 방법에 대해서 알아보겠습니다.
flex
먼저 간단하게 설명을 하자면 정렬하려는 요소의 부모 요소에
display: flex를 선언하면 flexbox가 만들어집니다.
display: flex 속성이 적용된 요소는 flex container가 되고,
flex container의 자식 요소는 flex item이 됩니다.
flex-direction
flex item은 주축에 따라서 정렬이 됩니다.
flex containerd의 flex-direction 속성이 주축의 방향을 결정합니다.flex-directioin 속성의 값으로는
row, row-reverse, column, column-reverse가 있습니다.
각각의 속성을 살펴보겠습니다.
- row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
- row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
- column: 요소들을 위에서 아래로 정렬합니다.
- column-reverse: 요소들을 아래에서 위로 정렬합니다.
flex-direction의 default 값은 row입니다.
justify-content
justify-content는 flex-direction의 방향으로 요소들을 정렬방법을 정해줍니다.
Justify-content의 속성 값으로는
flex-start, flex-end, center, space-between, space-around가 있습니다.
각각의 속성을 살펴보겠습니다.
- flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
- flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
- center: 요소들을 컨테이너의 가운데로 정렬합니다.
- space-between: 요소들 사이에 동일한 간격을 둡니다.
- space-around: 요소들 주위에 동일한 간격을 둡니다.
justify-content의 default 값은 flex-start입니다.
align-items
align-items는 flex-direction의 방향에 수직 방향으로 요소들의 정렬방법을 정해줍니다.
align-items의 속성 값으로는
flex-start, flex-end, center, baseline, stretch가 있습니다.
각각의 속성을 살펴보겠습니다.
- flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
- flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
- center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
- baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
- stretch: 요소들을 컨테이너에 맞도록 늘립니다.
align-items의 default 값은 stretch입니다.
이렇게 알아둔다면 우리는 웬만한 레이아웃의 배치는 할 수 있습니다.
깊게 들어가면 flex로 포스팅을 빼곡히 채워야하므로 기본적인 속성과 값에 대해 알아봤습니다.
display: flex;의 레이아웃 배치는 해보면서 익히시는 게 훨씬 이해에 좋습니다.
