[TIL-103] 위코드 2일차: HTML&CSS replit 14~24

HTML

 

table

개념

html 코드를 작성하여 표를 그리고 싶을 때 사용하는 태그이다. <table>은 <tr>, <td>, <th>와 함께 사용한다.

사용법

<table class="border-table">
      <tr>
        <th></th>
        <th>Dog</th>
        <th>Cat</th>
      </tr>
      <tr>
        <th>종</th>   
        <td>Canine</td>
        <td>Feline</td>
      </tr>
      <tr>
        <th>짖는소리</th>
        <td>Bark</td>
        <td>Meow</td>
      </tr>
      <tr>
        <th>Immature</th>
        <td>Puppy</td>
        <td>Kitten</td>
      </tr>
</table>

↓

	Dog	Cat
종	Canine	Feline
짖는소리	Bark	Meow
Immature	Puppy	Kitten

<table> 태그 안에 table row를 뜻하는 <tr>을 사용해 행을 만들고, 그 안에 table data를 뜻하는 <td>를 사용해 각각의 셀을 완성하면 된다. 테이블 열의 제목을 쓸 행은 안에 table heading을 뜻하는 <th>를 사용하면 된다. 서식도 자동으로 가운데 정렬과 굵게가 적용된다. 테이블 행의 제목을 쓰고 싶을 땐, 같은 를 사용하되 마찬가지로 을 사용해 행 단위로 표를 작성하면서 첫번째 셀 위치에(첫번째 data 앞) 입력하면 된다.

테두리는 기본적으로 적용되지 않으며 css를 사용해서 만들 수 있다.

 

 

테이블 셀 병합: colspan, rowspan

개념

테이블에서 <td>나 <th> 태그에 사용하여 셀을 가로로, 혹은 세로로 병합하는 속성이다. rowspan은 세로로 셀을 병합하는 행 병합, colspan은 가로로 셀을 병합하는 열 병합.

사용법

<td rowspan="2">HTML실습</td>

rowspan의 값을 2로 하면 두개의 열을 차지한다. 즉, 다음 행에서 대응하는 열까지 2개의 셀에 걸쳐 "HTML실습"이라고 나타난다.

<td colspan="2">수업 없습니다.</td>

colspan의 값을 2로 하면 두 개의 행을 차지한다. 즉, 해당 행에서 다음 열까지 2개의 셀에 걸쳐 "수업 없습니다."라고 나타난다.

 

 

textarea

개념

<textarea>는 input과 마찬가지로 사용자에게서 텍스트를 입력받을 수 있는 태그인데 더 긴 내용을 입력받을 때 사용한다. 보통 댓글 등에 이용된다. <input/>과 달리 <textarea>내용</textarea>와 같이 닫는 태그가 필요하므로 그 사이에 내용을 넣어줄 수 있다. 이 내용은 <input>의 placeholder와 달리 단지 보여지는 도움말이 아니라 사용자가 입력한 텍스트처럼 입력된 값이다.

사용법

오른쪽 하단에 있는 삼각형을 드래그하면 사용자가 textarea의 크기를 조정할 수 있는 resize 기능이 default로 있다. 없애려면 css에서 resize: none;으로 해준다.

 

---

CSS

 

float

개념

block 성질의 태그가 inline 성질로 바뀌게 한다.

사용법

div {
  float: right;
}

block 성질의 태그가 inline 성질로 바뀌게 한다.

 

 

margin으로 중앙정렬

개념

block 요소에 width 값을 주어 폭을 고정시키고, 좌우 margin을 auto로 하면 가운데로 정렬된다.

사용법

p {
   width: 100px;
   margin: 0 auto;
}

 

 

list-style

개념

<li> 태그를 <ol>이나 <ul>로 감쌀 때 목록 앞에 각각 숫자나 원이 생긴다. 근데 기본 스타일은 안 예쁘니까 css에서 list-style 속성을 이용하여 바꿀 수 있다.

사용법

ul {
	list-style: none;
}

 

 

padding-inline-start

개념

padding-inline-start를 사용하면 inline 요소에서 시작하는 쪽에서 padding을 줄 수 있다. 기본 시작 위치는 왼쪽(에서 오른쪽)이지만 direction을 rtl로 바꾸면 오른쪽(에서 왼쪽)으로 바뀐다. writing-mode를 horizontal-tb로 두면 기본값이고, vertical-rl로 바꾸면 오른쪽으로 90도 회전한 모양이 된다. 그럼 padding이 적용되는 시작 위치는 (원래 텍스트가 쓰이는 방향) 위쪽이 된다.

사용법

padding-inline-start: 5em;
writing-mode: horizontal-tb;
direction: rtl;

출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start

 

 

속성을 selector에 이용하기

속성으로 특정 태그 지목하기

태그로서 input, 특정 클래스 가진 태그로서 .class, 특정 id 가진 태그로서 #id만이 아니라 특정 속성 가진 태그를 지목할 수도 있다. 이때는 태그[속성="값"]으로 쓴다.

input[type="text"] {
	type 속성이 "text"인 input 태그에 적용될 스타일
}

CSS 적용할 속성 지목하기

태그 자체에 스타일을 적용하는 게 아니라 태그의 특정 속성에 대해 스타일을 적용할 수도 있다. 태그::속성으로 쓴다.

input::placeholder {
  color: #bbb;
}

input[type="text"]::placeholder {
  color: red;
}

예를 들어 <input>의 placeholder 속성을 지목하여 나타나는 텍스트의 색상을 바꿀 수 있다. 물론 []를 같이 사용할 수도 있다.

참고

CSS Selector Reference : https://www.w3schools.com/cssref/css_selectors.asp

 

 

position

개념

요소의 위치를 결정하는 속성으로, 값에는 static, fixed, relative, absolute 네 가지가 있다.

• static : 기본값.
• relative : 이 값을 주고 나면 해당 요소에 top, left, right, bottom 값을 줄 수 있다. 그러면 원래의 위치에서 위로, 왼쪽으로, 오른쪽으로, 아래로 부여한 값만큼 움직인다.
• absolute : 특정 부모 태그를 기준으로 위/아래/왼른쪽/오른쪽으로 움직일 수 있다. 기준이 되는 부모 태그는 보통 position에 relative를 부여함으로써 지정한다.
  • absolute가 되면 block 요소도 컨텐츠의 크기만큼 가로 너비를 갖게 된다.
  • absolute 상태에서 right:0과 left:0을 동시에 부여하면 부모의 양쪽에서 0만큼 떨어진다는 뜻이므로 width:100%와 같은 결과가 나온다.
• fixed : viewport(화면상에서 보여지는 영역)를 기준으로 상대적인 위치로 움직인다.

사용법

.기준태그 {
  position: relative;
}

.움직일태그 {
  position: absolute;
  right: 0;
  bottom: 0;
}

absolute를 사용해서 기준이 되는 부모로부터 오른쪽 바닥에 붙어있게 된다.

 

 

flex 속성 심화

개념

1. order
   • flex 박스 안에 있는 요소들은 박스 안에서의 순서를 갖고 있는데, flex 박스 안에 있는 요소에 대해 order 속성을 사용하여 바꿀 수 있다. order 속성의 값은 현재 순서인 기본값이 0 상태이므로, 1을 부여하면 순서가 하나 다음으로 넘어가고, -1을 부여하면 순서가 하나 앞으로 당겨진다.
2. align-self
   • flex 박스 안 요소들 중 개별적으로 원하는 align 속성을 부여할 수 있다.
3. flex-wrap
   • 기본값은 한줄에 나타내는 no-wrap이다. 이 속성의 값을 wrap으로 하면 flex 박스 안 요소들을 여러 줄에 걸쳐 정렬할 수 있다.
   • 요소가 너무 많아서 한 줄에 모두 나타내기 어려울 때 사용하면 좋다.
4. flex-flow
   • flex-flow: column wrap; 이라고 하면 flex-direction: column; 과 flex-wrap: wrap; 을 동시에 적용한 효과가 나타난다.
   • 즉, 요소들이 여러 줄에 걸쳐 세로로 정렬된다.
5. align-content
   • 요소들이 여러 줄로 나열되어있을 때 줄 사이의 간격을 조정할 수 있다.
   • 따라서 align-items와 달리 한 줄일 경우 나타나는 효과가 없다.

사용법

 

display: block & inline

개념

display는 레이아웃을 통제하기 위해 가장 중요한 CSS 속성이다. 모든 요소는 기본값으로 block 또는 inline 값을 가진다. 화면에서 보이지 않는 none과 inline-block, flex도 있다. 이밖에 list-item, table 등의 값도 있다.

• block-level element : 새로운 줄에 위치하며 양쪽으로 늘어나 가로 너비 전체를 차지한다.
  • div, p, form, header, footer, section 등이 있다.
  • width를 부여하면 양쪽으로 그 이상 늘어나지 않는다.
  • 이때 양옆 margin을 auto로 부여하면 양쪽의 남는 공간이 반으로 쪼개지면서 내용이 가운데 정렬된다.
    • 그런데 브라우저 화면이 부여한 width 보다 좁으면 브라우저가 수평 스크롤바를 만들어서 해결한다.
    • width 대신 max-width를 사용하면 낫다.
• inline-level element : 한 줄 안에서 이어져 위치한다.
  • 문단(p) 안에서 문단의 흐름을 방해하지 않고 텍스트를 감쌀 수 있는 span이 대표적이다.
• inline-block : 새로운 줄로 넘어가지 않고 inline 요소처럼 한 줄에 이어서 요소들이 나열되지만, block 요소처럼 높이와 너비를 부여할 수 있다.
  • margin도 부여할 수 있다.
• none : 주로 자바스크립트를 이용하여 숨겼다 보였다 할 때 쓰는 값이다. visuality를 hidden으로 하는 것은 화면에 보이지 않지만 공간을 차지하는 반면, none은 아예 페이지에 해당 요소가 렌더링되지 않게 한다.

참고

• http://learnlayout.com/ 
• https://poiemaweb.com/css3-layout 다시 봐야할 것. float?
• https://poiemaweb.com/css3-box-model 다시 볼 것.