html과 css :: Box Model | position | 색상코드표현 | background-image | table | float | input&textarea

Box Model

box는 content, padding, border, margin으로 이뤄져있다.

• content : 내가 작성한 요소 (기본)
• padding : border을 기준으로 안쪽 여백
• border : 테두리라고 생각하면 되며 content영역에 따라 | content + padding 의 크기에 따라 크기가 달라진다.
• margin : border을 기준으로 바깥쪽 여백

margin과 padding 값지정

• 4개의 값 지정 : 상 우 하 좌
• 3개의 값 지정 : 상 우좌 하
• 2개의 값 지정 : 상하 우좌
• 1개의 값 지정 : 상우하좌

margin: 10px auto;

• 첫번째는 위 아래의 margin이며 두번째는 왼,오른쪽의 마진이다.

 

List 태그

<ul>과 <ol>이 존재한다.

• ul은 리스트 앞에 ⚫️이 붙어서 만들어지는 것

• ol은 자동 넘버링 (1, 2, 3...)

 

nth-child(odd | even)

• odd는 홀수로 리스트에서 홀수번째에 해당하는 것을 선택해준다.
• even은 짝수로 리스트에서 짝수번째에 해당하는 것을 선택해준다.

 

display

---

• inline : 줄바꿈을 생성하지 않는다. 공간이 있다면 다음 요소가 같은 줄에 있다. ex) span
• block : 블록 요소 상자를 생성해서 정상 흐름 상태에서 요소 앞 뒤에 줄 바꿈을 생성한다.
• inline-block : 블록 내부의 값에 따라 블록의 크기가 좌지우지 된다. 인라인 상자처럼, 주변 컨텐츠와 함께 흐름.

 

float

---

• 이미지 주위를 텍스트로 감싸기 위해 만들어진 것.
• 속성은 left - 선택한 요소를 왼쪽부터 떠오르게 한다. | right - 선택한 요소를 오른쪽부터 떠오르게 한다. | none - 선택한 요소를 떠오르지 않게 한다.
• clear라는 속성과 함께 쓰면 유용하다. : left - 왼쪽 float 요소에서 벗어남 | right - 오른쪽 float 요소에서 벗어남 | none - 기본값 | both - 양쪽 float요소에서 벗어남

#첫번째 레이아웃 .main-page { float: left; width: 100%; height: 500px; /assignment2와 붙어있어서 띄어주기 위해서 height값을 줌, .home-page에는/ /clear: left;/ }

#두번째 레이아웃 .home-page { clear: left; }

 

 

Position 속성

---

• static : 기본 값이다.
• relative : 상대 위치 지정 요소, 다른 요소에 영향을 주진 않는다.
• absolute | fixed : 절대 위치 지정 요소 - top, right, left, bottom 요소의 모서리로 부터의 거리를 지정한다.

position: absolute에서의 %를 사용한 중앙정렬에서는 이미지의 크기가 만약 60px이라면 중앙에서 오른쪽으로 60px을 더 간것이니 60px/2의 값인 margin-left: -30px을 해준다.

position

 

link

• link - link태그로 사용할 CSS파일을 링크
• href - CSS파일 경로를 작성해준다
• type - link태그로 연결되는 파일이 무엇인지 (css파일 연결시 "text/css" 로 쓰면 된다.
• rel - html file, css file의 관계 설명해준다. (css파일 링크시 "stylesheet")

 

font-family

font-family: 'Courier New', Courier, monospace;

• 따옴표로 감싸져있는 것은 폰트 이름에 띄어쓰기가 되어있으면 사용해주면 된다.

font-weight

font-weight: 500 
font-weight:bold

• bold == 700 | normal == 400

 

색상코드의 표현

• hex색상코드 - 여섯자리로 표현한다 (#색상코드)
• rgb값 - red, green, blue값으로의 표현 (rgb(0, 0, 0))
• hsl - 색상, 채도, 명도 표현 (hsl(4, 80%, 30%)

❗️google 검색 : color picker | color picker hex color

• rgba - opacity를 넣는 다는 뜻으로 80%만큼의 불투명도를 준다. (rgba(30, 40, 50, 0.8))

 

정렬에서의 span 태그

• span은 inline 요소이기에 안에 들어간 content요소를 text-align으로 특정 요소나 화면 가운데로 정렬할 순 없다.

들여쓰기 | 사이사이 스페이스

text-indent: px; #들여쓰기 
<p>사이사이&nbsp;&nbsp;스페이스</p>

 

선택자 우선순위

h1 { font-weight: 400 } 
.h1-class{ font-weight: 700 }

• tag < class < id < inline styling (html file에 style 요소)

 

img태그의 속성

• alt : 이미지가 뜨지 않았을 때 보여줄 텍스트 <img alt="error">
• src : 이미지 파일 경로 | 이미지 url 주소

 

background-image로 넣기

img태그가 아닌 css를 이용해서 이미지를 생성하는 것.

<div class="bg">
</div> 

#css file 
.bg { 
	background-image: url( "src/url" ); 
    width: 100px; 
    height: 100px; 
    background-size: 100% 
}

• width와 height값을 줘야한다. 안그럼 content의 크기 값으로 이미지의 크기가 맞춰진다.

 

Table

• <tr> : 표에서의 한 행(가로열) table row

• <th> : 표에서의 타이틀

• <td> : 표에서의 하나하나의 데이터 table data

<table> 
	<tr> 
    	<th></th>
        <th></th>
        <th></th>
        #각 타이틀 4개 
    </tr> 
    <tr> 
    	<th></th>
        <td></td>
        <td></td>
        <td></td>
        #한행에 한개의 세로 타이틀과 데이터들이 들어간다.
     </tr> 
     <tr></tr> 
     <tr></tr> 
</table>

 

• 2개 이상의 행이나 열을 합치고 싶을 때는? : rowspan은 행을 병합하는 것 colspan은 열을 병합하는 것

<td rowspan="2">table data</td> #행 병합
<td colspan="4">table data</td> #열 병합

 

• 테이블에 선을 추가 하고 싶다면?

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

 

input | textarea

input::placeholder{ color: #bbb; }

• attribute를 표현한다고 해서 모두 콜론을 사용하는 것은 아니다.

input[type="text"]{ }

• text타입인 input박스만 스타일을 입히고 싶다면?

textarea { resize: none; }

 

---

 

div 대체 태그 참고사이트

HTML Semantic Elements

float url

CSS - float

레이아웃

CSS3 Layout | PoiemaWeb

 

Box model

CSS3 Box Model | PoiemaWeb