CSS 개념 정리, 문법, 속성 지정하는 방법

css

css : Cascading StyleSheets

웹개발에서 HTML은 구조화를 해주는 역할을 한다면 CSS는 문서의 스타일을 지정해주는 언어입니다.

기본 문법, 사용 방법

기본적으로 selector{속성1; 속성2...} 형태라고 생각했을 때 selector 부분이 태그를 가르키고 대괄호 안에 있는 것들이 반영하고 싶은 스타일입니다. html 페이지에 개시할 내용을 구조화한 뒤에 css를 활용해서 스타일링 하는 방법은 크게 3가지가 있습니다.

1. 인라인 스타일시트 <b style="">
2. 내부 스타일시트 : html 내부에서 간단하게 작성
   head에 p{}로 스타일을 정의해주면 body에서 <p> <span> 했을 때 p의 스타일을 반영할 수 있음
3. 외부 스타일시트 : 별도의 css 파일을 만들어서 스타일 반영 가능굳이 외부 css가 필요한 이유는? 관련된 웹사이트 모두에 공통적인 부분을 적용할 수 있기 때문! (네이버에 연관된 모든 페이지에 반영하기 등)
4. head 부분에 삽입 : <link rel="stylesheet" href="resources/css/css01.css">

• 우선순위 : 외부 스타일시트보다 인라인 스타일시트의 운선순위가 더 높습니다.
• html5 사용 시 head 부분은 포매팅, body 에는 구조화만 권장합니다.

.css 문법

/* 타입 */
pre{
    text-align: center;
}

/* id */
#s-id01{
    color: dodgerblue;
}
#s-id02{
    color: violet;
}

/* class */
.s-cls01{
    color: skyblue;
}

• pre 선택자 : 미리 정의된 형식(preformatted)의 텍스트를 정의할 때 사용합니다.
  • pre 요소 내의 텍스트는 시스템에서 미리 지정된 고정폭 글꼴(fixed-width font)을 사용하여 표현됩니다. 텍스트에 사용된 여백과 줄바꿈이 모두 그대로 브라우저 화면에 나타납니다.
  • pre 요소를 정의해 두면, 독특한 서식의 텍스트나 컴퓨터 코드 등을 HTML 문서에 그대로 표현할 수 있습니다.
• id 선택자 : 요소에 id를 지정하고 지정된 id 값을 사용해서 선택 (id는 유일한! 하나의 것의 값을 지정할 때만 사용하고, 각 id는 위의 코드에서처럼 '#' 으로 구분합니다.)
• class : 공통된 여러 개에 개별적으로 스타일 지정됨
• id와 class는 가장 많이 쓰는 것 중 하나입니다!! 둘의 차이점은 꼭 기억하기!

/* 전체 */
*{
    color: black;
}

• 전체 선택자 : 페이지 내에 있는 모든 태그에 반영됩니다. html은 기본적으로 반영되는 스타일이 있는데, CSS의 전체 선택자로 HTML에서 디폴트로 적용되는 스타일을 변경하기 위해 사용할 수 있습니다. 

/* 페이지 자체의 마진 */
        *{
            margin: 0px;
            padding: 0px;
        }

---

/* 자식 */
#atc > p {
    color: yellow;
}

• 자식 선택자 : 어떤 태그의 바로 밑에 있는 태그에만 적용됩니다. 
  • atc 라는 id를 가진 요소를 찾아서 바로 밑에 있는 p 태그만 적용됩니다 (지금은 p)
• 파일의 가장 위에서부터 atc라는 id를 찾아서 적용함. 만약 해당되는 태그가 없다면 아무런 변경 사항도, 에러도 없습니다.

/* 인접 */
span + pre{
    color: blueviolet;
}

• 인접 : span 태그 옆에 있는 pre 태그를 찾아서 pre와 현재 작성한 내용 적용됩니다.

/* 하위 */
#atc2 span{
    background-color: navy;
    color: white;
}

• 하위 선택자 : atc2 라는 id를 가진 요소를 찾아서, 그 안에 있는 '모든 span' 태그에 적용합니다.

/* 속성 */
p[title]{
    color: coral;
}

• 속성 선택자 : <p title="a">으로 속성이 정의된 태그에만 적용됩니다. (크롤링 할 때 좋다고 합니다!)

/* 가상 클래스 */
a:link{
    color: springgreen;
    font-size: 20pt;
}
a:visited{
    color: lightgreen;
    background-color: violet;
}
a.active{
    color: pink;
}
input:checked{
    width: 100px;
    height: 100px;
} 

• 가상 클래스 : 링크에 손가락을 올리면 색이 바뀌도록 하는 코드입니다. 

 

---

예제 파일을 업로드 하기 어려워서 저의 GitHub에 업로드 해 두었으니 확인해보시면 좋을 것 같습니다~!