🚀 1. tag, content, attribute, element
1.1 tag, content
보통 내용(content)이 들어가는 것을 감싸는 것을 말하며
용도에 따라 그에 알맞는 태그가 존재한다
<p></p>, <span></span>
등이 이에 해당하며
사용은 아래와 같이 된다.
<tagname>content</tagname>
closing tag(/sth)이 없는 경우도 존재한다(Ex. img, br..)
1.2 attribute(속성)
속성은 태그에 사용할 수 있는 다양한 것들이며 예로는 class, src등이 존재하며 태그의 종류에 따라 천차만별이다.
<div class= ""></div> <img src = ""></div>
1.3 element(요소)
요소는 위 두가지의 합이라 생각하면 편하다.
<h1>Start</h1> <img src = "what.jpg">
2. font-family
먼저 예제를 보자!
body{ font-family: Georgia, "Times New Roman", Times, serif; }
위를 해석하면 브라우저가 Georgia라는 폰트를 지원해주면 우선 사용하겠다는 것이다
만약 지원하지 않으면 Times New Roman 폰트를 사용 그것도 안되면 serif까지 가는 것이며 보통 serif같은 폰트는 모든 브라우저에서 지원하는 것이기에 가장 마지막에 들어간다.
(띄어쓰기가 되어있는 폰트명은 ""로 감싸준다)
3.문구 들여쓰기(indent)
들여쓰기를 하기 위해서는 두가지 방법이 있다고한다.
3.1 css로 들여쓰기
필요한 px만큼 들여쓰기를 이용할 수 있다.
.abc{
text-indent: 10px;
}3.2
문장사이사이에 스페이스를 추가하고 싶을 때 해당코드를 작성하면 된다
<p> 띄워썻다</p>
문제는 는 특별히 지정된 px값을 나타낼수가 없다(글씨체마다 다르기때문에 그렇다고 한다... ;)
따라서 대충 눈대중으로 맞추는 방법이 있으나 그냥 하나로 통일하는 것이 좋을 것 같다.
4. margin, border, padding, content
장황하게 코드를 쓰기에는 너무 많이 사용을 해봤기 때문에 기본 개념을 확실히 적어놓고 좀 익숙해질 필요가 있는 것 같다.
평상시 작성할때는 그냥 보이는 것에 치중하다 보니 어쩔때는 margin으로 맞추고 어쩔떄는 Padding으로 맞추면서 계속 개념이 흔들렸기 때문이다.
- Margin: 테두리 바깥의 여백
- border: 테두리
- padding: 테두리 내부의 여백
5.box-sizing: border-box;
눈으로 보이는 너비와 개발자가 코딩하는 값을 직관적으로 맞춰주기위해 사용된다
사용하지 않는다면 content의 크기와 margin,border,padding의 크기를 각각 계산하여 원하는 크기에 맞춰 px을 설정해줘야 하는 불상사가 생길 수 있다.
* { box-sizing: border-box; }
위와 같이 * selector 로 모든태그에 적용할 수 있다.
6. Making List
리스트를 만들어보며 중요하다 여겼던 몇가지 코드를 가져와서 의미를 찾아보자
일단 위와 같은 리스트를 작성할 때
unorderd list 에 li로 각 내용을 넣어주었고
ul{ list-style: none; }
위 설정을 통해 각 bullet들을 없애 주었으며
왼쪽의 검정 줄을 구현하기 위해 border left를 사용하였다.
border-left: 3px solid black;또한 ul 테두리 내부 발생한 여백을 줄이기 위해 padding값을 0으로 설정해줬다.
그리고 마지막으로 padding-bottom 등의 값을 줘 줄과 리스트의 크기를 일치시켰다.
여기서 추가로 색을 지정할 때 nth-child 개념을 이용하였다.
li:nth-child(even): red;
7. Table
테이블을 표현하기 위해서는
<table> <tr> <th> <td>
등이 필요한데
간단한 예제를 보면 이해가 쉽다.
<table>
<tr>
<th>1,1</th>
<td>1,2</td>
</tr>
<tr>
<th>2,1</th>
<td>2,2</td>
</tr>
</table>
그냥 고등학교때 배웠던 행렬 생각하면 쉬운데, 문제는 th 라는 애는 태그 자체가 font-style이 무거워지고 중간정렬을 시켜버린다.
또한 테이블을 만들 때 셀병합과 같은 기능으로다가 rowspan='원하는 행의 수까지', colspan='원하는 열의 수까지'의 기능이 있다.
8. Input
8.1 input type
input type은 다양하게 존재한다. 보통나는 text만 기억하고 나머지는 찾아서 썻던 기억이 있다.
새롭게 알게된 Password는 텍스트와 비슷한 속성인데 입력시 까만 원으로 나오게 되며
placeholder는 도움말을 넣어주는 부분 value는 기입하고 싶었던 값 또는 예제를 미리 기입등의 용도로 쓰인다
8.2 textarea
보통 짧은 방명록이나 댓글을 입력할 때 사용한다고 한다.
<textarea>얘는 Input보다 더 긴 텍스트를 입력받고 싶을 때 사용 해보자</textarea>8.3 input type의 디자인 변경
input, button, textarea는 모두 inlineelement로 한줄에 이어져 나오기 때문에 이를 적절히 배치하려면 아래와 같이 div 클래스로 감싸준 뒤 영역을 분리하고 배치를 한다 block성질의 div class를 이용하여 처리하는 것이다.
<div class="input-wrap"> <input type="text"> </div>
