css

css selector

.a div .b .pre span {
  background-color: yellow;
}

라는 css가 있다고 하자. 이는 a클래스 안에 div태그 안에 b클래스 안에 span태그에만 적용되는 것이다. 아래 코드를 보자.

<div class="a">
  <div>
    <header class="b">
      <h1 class="pre">
        <span>제목! 노란색 배경 나옴!</span>
        <span class="title">이것도 나옴!</span>
      </h1>
      <span>이건 적용안 됨</span>
    </header>
  </div>
  <span>이건 적용안 됨</span>
</div>

span태그가 5, 6, 8, 11번째 라인에 사용되고 있지만 실제로 위의 css가 적용된건 5, 6번 라인 뿐이다.

이렇게 css를 사용하다보면 중복되는 스타일이 생길수있다.
이때는 아래의 규칙을 적용한다

• inline styling(직접 요소에 작성): 1000점
• id: 100점
• class: 10점
• tag: 1점

대략 tag <<< class <<< id <<<<<< inline css 라는것만 알아두자.

Block & Inline

위의 그림에서 노란색 부분이 차지하는것이 영역입니다.
1, 2, 3, 4번째 줄에 해당되는것이 block이고 5번째 줄에 해당되는것이 inline이다.

<header>, <footer>, <p>, <li>, <table>, <div>, <h1>

< 대표적인 block 태그들이다. >
항상 새 줄에서 시작하며 좌우 끝까지 영역을 차지한다.

<span>, <a>, <img>

< 대표적인 inline 태그들이다. >
딱 텍스트의 영역만큼 차지한다.

하지만 이는 css를 통해 성질을 바꿀수 있다.

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

이와 같은 값을 css 속성을 줌으로서 inline 속성을 가질 수 있다.

.block-span {
  display: block;
}

반대로 이와 같은 값을 줌으로서 block 속성을 가질 수 있다.

margin auto

.center {
  margin: 20px auto;
}

css속성으로 위와 같이 작성하였을때 이는 20px은 위,아래를 의미하고 auto는 좌,우를 의미한다.

.center {
  margin-top: 20px;
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: auto;
}

< 두 코드의 의미는 같다. >

< 실제로 적용한 모습 >

selector 표기법

위에서부터 해당 태그의 첫번째 순서,
해당 태그의 마지막 순서,
해당 태그의 홀수 순서,
해당 태그의 짝수 순서 이다.

position

position에는 총 4가지 값이 존재한다.

• position: static;
• position: relative;
• position: absolute;
• position: fixed;

이중 static은 기본값이다.

position: relative;

이는 static이었을때 기준으로 상하좌우로 움직입니다.

position: absolute;

이는 position: static 속성을 가지고 있지 않은 부모를 기준으로 상하좌우로 움직입니다. 만약 부모중 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.

position: fixed;

이는 사용자가 보는 화면을 기준으로 고정됩니다.

float & clear

간단하게 설명하자면 해당 클래스에 해당되는 부분을 띄워서 배치하는것이다. 띄워지기 때문에 기존의 div태그 등의 문단으로 묶이지 않고 전체적인 모양을 흩트려 놓는다. 때문에 사용되는것이 clear이다.

float 요소를 가진 부모태그에 css로 clear:both;를 작성하게되면 해당 부모는 float효과를 받지 않고 float된 요소를 감싸게 됩니다.

HTML

ol & ul

< ol로 li를 묶어 정렬했을때 >
< ul로 li를 묶어 정렬했을때 >

Input & Textarea

<input type="text" placeholder="ID"> 
<input type="password" placeholder="비밀번호"> 
<input type="number" placeholder="학번">
<textarea>소개:</textarea>
<button>제출완료</button>

< 위 코드의 실행 화면 >
input 태그를 이용하여 입력을 받을수있다.
type에는 text, password, number 등을 받을수 있고 각각의 용도가 다르다.

• text: 일반적인 어느 텍스트나 받을수 있다.
• password: 입력시 검은점으로 표시된다.
• number: 숫자만 입력 가능하다.

placeholder를 통해 어느것을 입력받는지 표기가 가능하다.
value를 통해 미리 값을 입력해 놓는것이 가능하다.
textarea 태그를 이용하여 input 태그보다 더 긴 문장을 입력 가능하다.

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

위의 css코드를 작성시 input중 type이 text인 부분에만 css를 적용할 수 있다.