HTML & CSS (2) TIL

Jivyy·2020년 4월 22일

WECODE

목록 보기

1/20

Margin Auto

div {
  background-color: yellow;
  margin-bottom: 20px;
}
.has-width {
  width: 150px;
  
Block 요소일 때 width 값을 부여하면 더이상 늘어나지 않음.

.center {
  margin: 20px auto;
}
margin 에 auto로 설정하면 가로 중앙에 온다.

NOTE
-마진 값이 1개 일때 : 사방 모두 같은 값
-마진 값이 2개 일때 : 위&아래/오&왼
-마진 값이 4개 일때 : 위/오/아래/왼 순으로 적용

List

ul {
  list-style: none;
}
적용하면 unordered list상 나타나는 왼쪽의 점을 지울 수 있다.

NOTE
CSS Selector

Table

<table> : <ul>이나<ol>처럼 항상 테이블을 감싸는 태그
<tr> : table row / 한 행을 시작
<td> : table data / <tr> 내에서 사용
<th> : table heading / 가운데정렬, 글씨체 bold

NOTE
<td colspan="3">water polo</td> : 행이나 열을 병합할 때 사용

Input

type="text" : text만 입력하는 속성
type="password" : 비밀번호용
type="number" : 숫자만 입력
textarea : input보다 긴 텍스트 입력용 
placeholder : 도움말 넣어주는 부분(실제 텍스트 아님)

<placeholder 중 text 타입만 선택하는 방법>

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

<마우스를 올리면 cursor 모양이 바뀌도록 하는 방법> 

button:hover {
    cursor: pointer;
}

Position

relative

position: relative;
  <자체로는 의미가 없으나 top, right, bottom, left 프로퍼티로 이동시킬 수 있다.>
  
  .relative {
  position: relative;
}
.top-20 {
  top: -20px;
  left: 30px;
}

absolute

<절대적인 위치에 둘 수 있다. 
일반적으로 absolute를 쓸 경우, 
움직이고 싶은 부모에게 position: relative; 를 부여한다.>
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

fixed

<고정된 부모가 필요 없이, 눈에 보이는 브라우저 화면 크기 내에서만 움직인다.
스크롤은 내려가는데 고정되어 있는 경우 fixed를 사용한 것이다.>

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

CSS 레이아웃

NOTE
div태그를 많이 이용하였으나
현재는 div를 대신할 여러 태그들이 있으니 링크 참고

Float

플롯은 이미지 주위를 텍스트로 감싸기 위해 만들어진 CSS프로퍼티로, 하기와 같이 웹사이트의 레이아웃을 잡는데 사용된다.

img{
  float: right;
  width: 200px;
  height: 1em;
}

<이와 같이 지정할 수 있고,
 clear: right;
 와 같이 값을 지정하여 오른쪽의 element를 비울 수도 있다.
 
 
 nav {
  float: left;
  width: 200px; 혹은 width: 50%
}
section {
  margin-left: 200px;
}

이와 같이 전체 레이아웃을 잡을 수 있다.

Media Query

표시되는 브라우저와 디바이스에 반응하는 반응형디자인을 위해 사용되는 도구.
특정 조건에서 CSS를 적용하라는 규칙을 줄 수 있으며
@media 라는 문법으로 작성되며 하기의 예와 같다.

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}