개념, 작성방식, selector 표현식

FRONT/css

개념, 작성방식, selector 표현식

hyunjun's developing 🏣 2024. 8. 14. 17:50

개념 -> HTML에 디자인을 입히는 언어

작성방식 ->인라인 스타일 시트(우선순위 제일 높음), 내부 스타일시트(같은 파일에 <style>에서 작업하는 것), 외부 스타일시트(css파일을 불러와서 내 페이지에 입히는 것)

인라인 태그 예시

스타일 태그 예시

body{

margin: 0px /* 외부여백 */

}

p{color : blue};

</style>

외부 스타일 시트 적용 예시

2. Selector 표현식

Selector 표현식이란 ? HTML을 스타일 하기위한 표현식. HTML은 많은 양의 요소가 있기 때문에 다양한 Selector 표현식이 존재함.

width : 800px;

background-color: orange;

}

strong {

color : red;

}

#a{

font-size : 40px;

}

.c {

color:blue;

}

p{ ;} 이 부분은 <p>태그에 스타일을 입히겠다는 뜻이다.

strong{ ;}는 <strong>태그를 굵고 크게 만들어서 강조를 하겠다는 뜻이다 .

#a{ ;}에서 #은 뒤에 아이디의 이름이 들어올것을 표시하는 문자이다. 따라서 a는 아이디의 이름이다.

<h1>안녕안녕안녕<strong id = "a">안녕!!!!!!!!</strong></h1>

.c{ ;}에서 .은 뒤에 클래스의 이름이 들어올 것을 표시한다. 따라서 c는 클래스의 이름이다.

<p class = "c">13일 정치권에 따르면, 민주당 중앙위원회는 <span>전날</span> 당이 원하는 나라·사회·국가에 '기본사회'를 명시하는 내용의 당 강령 개정안을 통과시켰다.

구체적으로 민주당은 '사회경제적 양극화·불평등 극복과 모든 사람의 기본적인 삶 보장'을 위해 <b>기본사회</b>를 <i>추구</i>하겠다는 방침이다. </p>

/* 전체선택자 */

*{margin: 10px; font-family : '굴림';}

이 코드는 <body>에 있는 모든 문자에 효과를 입히는 내용이다.

/* 다중선택자 */

span,b,i{

color:green;

}

/* 자식 선택자 */

.c > span { /* p태그 안에 span 태그를 선택함 */

background-color:pink;

}

/* 인접 선택자 */ /* h1태그 바로 근처에있는 p선택자만 선택 */

h1 + p {

background-color:yellow

}

h1 ~ p { /* h1 다음에 모튼 p태그 */

padding : 60px;

}

다중 선택자의 초록색 폰트는 태그의 이름이다 따라서 span,b,i 태그에 있는 모든 요소의 글자색이 초록색이 된다.

자식 선택자는 .c(클래스의 이름이 c)인 것의 span 태그만 효과를 적용해주는 것이다.

+와 ~는 주석을 읽어보면 이해가 될 것이다.

위를 보면 하이퍼링크가 달려있는 것을 볼 수 있다. 이는 a태그로 만든 것이다.

a:link{

color:green;

}

a:active{

color:yellow; /*마우스를 가져다대고 꾹 누르고 있으면 노란색*/

}

p:hover{

background-color:red; /* 마우스 커서를 가져다가 대면 색이 바뀌어 제일 중요해 알아둬 */

}

위 링크에 스타일을 입혀주는 코드이다. link 속성은 링크의 기본 속성을 바꿔주고 active 속성은 꾹 눌르고 있을 때 색을 바꿔준다. hover는 마우스를 가져다대면 색이 바뀌어 이 부분에 무언가 있음을 사용자에게 알려주는 역할을 한다.

똑같은 내용을 div 태그로 감싸서 두개를 만들어주고 id만 다르게 하였다. 그럼 밑에 똑같은 것이 두개가 추가가 된다.

/* 수도 클래스 선택자 */

#container2 p:first-letter{

font-size:40px;

}

#container2 h1:first-child{ /* h1태그가 콘테이너 바로 옆에 있다면이란 뜻 */

background-color: yellow;

}

#container2 p:after{

content : "뒤에 가상의 요소를 추가한다.";

color:red;

}

위와 같이 아이디를 활용해 원하는 부분의 div 클래스만 바꿔줄 수 있다. first_letter은 태그의 첫글자만 바꿔준다.