[T.I.L] Wecode 3일차 (2021.08.04)

  배웠던 것을 정리하기에 앞서, 첫 날 부터 예기치 못한 변수가 생기는 바람에 조금씩 일정이 밀려버렸다... 참으로 안좋은 변명이지만 그로 인해 2일차 작성을 하지 못해 3일 차인 오늘 2, 3일차에 공부 한 것을 몰아서 정리하려고 한다.

<목차>
1. Block & Inline
2. List
3. Table
4. Input
5. Position
6. Float
7. 마치며...

1. Block & Inline

<header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등이 모두 block 요소에 해당
block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다

<span>, <a>, <img> 태그 등이 inline 요소
inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻

A. Block 을 inline으로 변경
display & float

display: inline-block;

float: left; or float: right;

B. Inline 을 block으로 변경

display: block;

C. Display: none; 프로퍼티

비록 코드가 실제로 있다고 하더라도 해당 요소가 화면에는 표현 되지 않음
none 이 필요 한 이유? 여러 이유중 하나는 interactive한 웹을 구현할 수 있기 때문임

네이버 검색창에 텍스트를 입력한 순간, 아래에 관련 목록이 뜨는 것을 볼 수 있다.

원래는 해당 영역이 display: none; 으로 보이지 않다가, 텍스트를 입력하는 순간,
JavaScript가 검색 목록 요소에 다른 클래스로 교체 함
아마 그 새로운 클래스에는 display: block; 이라는 값이 있었을 것이다.
이렇게 클래스 이름에 따라 요소에 display: none display: block 이 있었다가 없었다가 하면서
요소를 보이게 / 안 보이게 할 수 있는 것 이다.

2. List

list에는 두 가지 종류가 있다. 1) ol (ordered list) 2) ul (unordered List)
list 코드는 아래와 같이 입력 해야 함.

<ul> 
	<li>List</li> 
	<li>Set</li>
	<li>HashMap (Dictionary)</li> 
	<li>Queue</li> 
	<li>Stack</li> 
	<li>Tree</li>
	<li>Sorting</li>
	<li>Search</li> 
</ul>

list style

ul에서 왼쪽의 작은 원을 삭제하려면, list-style: none; 을 사용하면 됨
list 왼쪽에 선을 추가하려면, border-left를 활용하면 된다.
너비 조절 및 위,아래 조절은 padding 값을 조절해 주면 된다.

마지막으로
리스트에서 첫 번째, 마지막, 홀수 번째, 짝수 번째 항목을 선택 할 수 있는 표기 법이 있다.
selector:first-child{} -> 첫 번째
selector:last-child{} -> 마지막
selector:nth-child(odd){} -> 홀수
selector:nth-child(even){} -> 짝수

ex) li:last-child{padding-bottom: 0l}

3. Table

테이블 속성의 경우 여러마디 말 보다 하나의 예시 코드가 더 이해가 잘 갈 것이라고 생각한다. 아래 예시 코드 참고

    <table class="first">
      <tr>
        <th></th>
        <th>1pm</th>
        <th>2pm</th>
        <th>3pm</th>
      </tr>
      <tr>
        <th>Gym</th>
        <td>Dodge ball</td>
        <td>Kick boxing</td>
        <td>Sack racing</td>
      </tr>
      <tr>
        <th>Exercise Room</th>
        <td>Spining</td>
        <td class="second" colspan="2">Yoga marathon</td>
      </tr>
      <tr>
        <th>Pool</th>
        <td class="second" colspan="3">Water pool</td>
      </tr>
    </table>

위의 코드에서 colspan은 열방향 셀을 통합해주는 프로퍼티 이며, 행방향 통합 프로퍼티는 rowspan이다.

CSS 코드는 아래와 같다.

	.first th, .first td {
	  border: 1px solid black;
	}

	.first th {
	  font-weight: normal;
 	  text-align: left;
	  }

이로 인한 출력 값은 아래 그림을 참고 하기 바람

4. Input

Input은 자체 태그이기 때문에 닫는 태그가 없으며 입력 방식은 아래와 같다.

	<input type="text" placeholder="ID"> 
	<input type="password" placeholder="비밀번호">
	<input type="number" placeholder="학번">

여기서 placeholder에 입력되는 값은 도움말이 되며, 실제 값 입력시 사라진다.
텍스트에 미리 값을 넣어 놓고 싶을 때는 value 프로퍼티 사용한다.

보통 긴 문장 같은 Text를 입력 받아야 할 경우에는 Input을 사용하기 보다는 textarea 태그를 사용한다.

<textarea>소개:</textarea>

각각의 출력 결과는 아래 사진 참고

placeholder 색상 변경 방법

input::placeholder {
	  color: #bbb;
	}

Button 스타일 변경 방법

button { color: white; font-size: 15px; background-color: #4CAF50; 
padding: 5px 10px; border-radius: 5px;}

버튼에 마우스 올렸을 때 커서 모양 변경 방법

button:hover {cursor: pointer;}

cursor 종류는 (https://www.w3schools.com/cssref/pr_class_cursor.asp) 참고

• 요소를 불투명하게 바꿔주는 옵션
  opacity
  

5. Position

position: relative; 위치를 이동시켜 주는 top, left 등의 프로퍼티가 있어야 이동시키는 것이 가능하다. top, left등의 프로퍼티는 relative프로퍼티가 있을 때만 적용 가능

<예시>

<div class="relative top-20 box">div.relative.top-20</div> <— HTML
	
.relative { position: relative; }  <— CSS
.top-20 { top: -20px; left: 30px; }

position: absolute; 특정 부모의 위치를 기준으로하여 절대적으로 움직임 부모 중에 position이 relative, fixed, absolute 중 하나라도 있으면 그 부모에 종속 되어 절대적으로 움직임. (아래 사진 참조)

일반적으로 absolute를 사용할 때는 기준이 될 부모에게 position: relative;를 사용하는 경우가 많음

* 참고로 right: 0; 은 오른쪽으로 부터 0 만큼 떨어졌다는 의미임
   bottom, top 등 모두 마찬가자임.

position: fixed; 지정해 주는 위치에 요소가 고정 됨.
(스크롤을 내려도 그 위치에 고정 됨) 따로 부모 position이 필요 없음.

<예시>
.coupon { position: fixed; right: 0; bottom: 0; 
background-color: red; color: white; font-size: 20px; }

6. Float

Float은 웹 페이지의 레이아웃을 구성하는 데 도움이 되는 속성이다.
Float 속성에는 세 가지 값(left, right, none)을 줄 수 있다.

div태그를 이용하여 section을 둘로 나누고, 한 개의 div에 float: left;
다른 하나에 float: right을 주면 레이아웃을 좌,우로 분할 할 수 있다.

덧붙여, width, height를 적절히 조율하면 깔끔한 레이아웃 구성이 가능하다.

그러나, float 속성을 갖는 요소는 부모 속성에서 높이를 알 수 없어서 높이가 벗어나는 경우가 가끔 있음 (아래 사진 참고)

위와 같은 문제를 해결하기 위해는 3가지 방법이 있음

1. div를 닫기 전 마지막에 아무 태그나 넣고 clear 속성을 적용 하는 방법
2. 해당 div에 클래스를 지정하여 overflow: hidden; or auto;을 주는 방법
3. 겹쳐지는 부분의 아래 해당 div에 클래스를 지정하여 float 지정을 하는 방법 그러나 3번의 경우에는 block이 해제 되기 때문에 따로 width를 변경해 줘야 한다.

최근에는 레이아웃 구성을 float속성이 아닌 flex 속성을 더 많이 사용 한다고 한다.

7. 마무리...

  그래도 이제 Velog에 게시물을 게시한게 5개가 넘어갔다. 그럼에도 불구하고 아직 작성하는 요령이 생기기에는 한참 멀은 것 같다. 무엇보다 중요한건, 절대적으로 시간이 부족하다!!! 왠만하면 한 번 공부 할때 완전히 이해하고 넘어가는게 좋을 것 같다는 주의라 꼼꼼하게 메모장에 정리도 하면서 하고 있는데 시간이 너무 부족하다. 솔직히 Velog에 많은 시간을 들이는게 쉽지가 않은 상황이다.
그래도 지속적으로 하는 것이 중요한 것이니까 최대한 자주 올릴 수 있도록 해야겠다...
그럼 이만~~