2024. 5. 17. 20:19ㆍHTML
CSS란.
- 마크업 언어(html)가 실제로 화면에 표시되는 방법을 기술하는 언어
(모양, 색상, 크기, 배경이미지, 움직임 등)
- 하나의 태그에 여러 css코드를 겹쳐서 원하는 스타일을 만들어냄
- W3C에서 CSS를 표준 스타일 서식방식으로 지정
- style 태그는 head안에 작성해도 되고 body안에 작성해도 됨
- head와 body 안이 아니라 다른 곳에 존재해도 됨
- 다만 head 안에 모아서 작성해주는 것이 암묵적인 룰이며 추후 수정하거나 추가 작업을 진행할 때 유용
CSS선택자
CSS로 꾸미기 설정을 진행할 때는 5가지 방법이 존재
1. 태그옆에 style="원하는 스타일 작성"
<p style="font-size: large;">안녕하세요.</p>
2. head 태그 안에 style 태그를 작성해서 스타일 적용하는 방법
1) 태그 이름을 작성한 후 스타일 적용
<style>
p{
font-size: large;
}
</style>
2) 태그 옆에 class="변수명"을 설정한 다음 스타일 태그 안에서 변수명을 작성해준 후 서식 적용
단, class를 이용해서 스타일을 적용할 경우 스타일 태그 안에 .변수명{} 로 작성해야함. "." 반드시 표기
<style>
.변수명{
color: yellowgreen;
}
</style>
<p class="변수명">반갑습니다</p>
3) 태그 옆에 id="변수명" 설정한 다음 style 태그 안에 변수명을 작성해준 후 스타일 적용
단, id="변수명"으로 표기할 경우 style 태그 안에 #변수명()으로 작성해야함
"#" 반드시 표기
<style>
#변수명2{
color: tomato;
}
</style>
<p id="변수명2">환영합니다</p>
* 2(class), 3(id) 차이점
style을 작성할 때는 class 안에 변수명을 작성해주는 게 좋음
javascript에 관련된 코드를 작성할 때는 id안에 변수명을 작성해주는게 좋음
class의 경우 여러 태그에 같은 스타일을 적용할 때 유용
-> id보다 우선순위가 낮음
id의 경우 특정한 기능을 가진 태그에 유일한 스타일을 적용할 때 유용
-> 특별하게 스타일을 가져야하는 경우 사용하기 때문에 우선순위가 높음
<style>
.클래스스타일{
color: brown;
}
#아이디스타일{
color: blue;
}
</style>
<p class="클래스스타일" id="아이디스타일">둘 중 더 우선순위는 id스타일</p>
4) 태그에 작성된 특정 속성을 사용해 선택하는 선택자
input[name] : input 태그 안에 존재하는 모든 name 속성값에 공통 설정
위와 같이 작성할 경우 맨 마지막에 작성된 디자인이 적용
만약 같은 속성(=name)에서 name="변수명" 특별한 디자인을 작성하길 원한다면
input[name="변수명"]{} 작성해준 후 디자인 적용
<style>
input[name]{
background-color: aqua;
}
input[name="이름-1"]{
background-color: violet;
}
</style>
<input name="이름-1"> <!--type안써도 디폴트가 text-->
<input name="이름-2">
3. .css 형식 파일을 이용해서 .css 파일 안에 css 코딩을 작성
head 태그 안에 style 태그 대신 link 태그를 사용해서 작성
<link> : 외부 css 파일과 연결하는 태그(css 파일 이외의 여러가지 다수 연결 가능)
rel(relationship) : 연결하려는 파일이 어떤 종류인지
href(hyper reference) : 참조하려는 파일의 위치(주소,경로 등)
html 안에서 style 코드가 너무 길어질 경우 중복되는 코드를 파일 하나에 작성한 후 여러 파일에서 사용가능
'HTML' 카테고리의 다른 글
일반 위치 선택자 (0) | 2024.05.17 |
---|---|
서식 양식 (0) | 2024.05.17 |
CSS선택자 우선 순위 (0) | 2024.05.17 |
html 실습 - 음식 배달 사이트 만들기(주문받기 form) (0) | 2024.05.17 |
html실습 - 음식 배달 사이트 만들기(음식소개) (0) | 2024.05.17 |