-
CSS 기초자바 초보개발/HTML 2023. 11. 30. 15:46
CSS3를 사용하여 여태 작성했던 HTML코드에 정렬과 꾸미기를 적용해보려고 한다.
CSS는 HTML의 <head>태그 내에서 <style>태그를 사용하여 적용할 수 있고, { } 블록 안에 코드를 입력해 적용한다.
ex) *{border : 0px}
상속관계
이전에 HTML을 사용해보면서 , 태그 안에 태그를 넣을 수 있다는 것을 알게되었다.
<section>
<article>
<h1> Lorem ipsum dolor sit amet</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</article>
<artlce>
<h1>Lorem ipsum dolor sit amet</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</artlce>
</section>
예시1.
위를 예시로 보면 <section> 태그 안에 <article>태그가 두개 들어가있다. CSS로 <section>태그를 스타일변경시 그 안의 <article> 태그에도 적용이 된다.
선택자
* { } : 모든 태그를 선택한다.
태그{ } : 태그의 형태에서 <> 부분을 빼고 태그의 이름을 쓰면 해당 태그들에만 적용된다.
#아이디{ } : 해당 id를 사용하는 태그에만 적용한다. 같은 id를 사용하면 맨 위의 하나에만 적용되므로 주의하자
.클래스{ } : 해당 클래스에 속하는 모든 태그들에 적용한다.
후손 선택자 : 태그1 태그2 형식으로, 태그1 이름 + 스페이스바 공백 + 태그2 이름 을 입력하면, 태그1 내부의 태그 2 안에있는 모든 태그에 스타일이 적용된다. 자식 선택자와는 달리 두 태그가 위아래로 직접적으로 붙어있을 필요는 없다.
위 단락에 예시1에서 <style>태그 내에 section article 선택자를 입력시, <section> 안의 <article> 태그들에 포함된 모든곳에 해당 스타일이 적용 될 것이다.
자식(자손) 선택자: 태그1 > 태그2 형식, 태그1 바로 아래의 태그 2에만 적용된다.
태그 1 > 태그 2 > 태그3 형태도 가능. 태그1 밑의 태그2 밑의 태그3에만 적용.
예시 1을 기준으로 section > article 선택자를 사용하면 <section>안의 <article>에만 스타일이 적용되고, <h1>,<p>태그에는 적용되지 않을 것이다.
태그:active => 사용자가 해당 태그를 마우스로 클릭한 상태에서 실행. 마우스를 꾹 누르고 있어야 { } 안의 내용이 지속 적용된다.
태그:hover => 사용자가 해당 태그에 마우스를 올려놓은 상태에서 지속 실행된다.
기본적인 속성
h1{background : 값 ;} => 배경에 관련한 스타일을 조정한다.
h1{font : 사용할 폰트 이름} => h1에 적용할 폰트를 파일 이름으로 찾아서 적용한다. 컴퓨터에 해당 폰트가 있어야 한다.
h1{color : #000000 혹은 rgb(255,0,0) 또는 white(색깔영문명) ;} => h1에 쓴 글자 색깔을 지정한다
h1{float : left ;} => h1태그 내부 요소들이 정해진 공간 내에 왼쪽을 기준으로 순서대로 띄워진다.
h1{overflow : hidden,scroll,visible,...} => h1태그 내에서 데이터가 정해진 공간보다 많아서 넘치게 될경우, 어떻게 처리할지 지정한다. 기본값은 visible이고, 넘치는 데이터를 전부 표시한다.
h1{border : 10px solid #FFFFFF} => h1태그 공간의 테두리를 solid 형식으로 표현하고, 10px 크기와 #FFFFFF색으로 테두리를 생성한다.
h1{margin : 10px} border영역 바깥의 margin 영역에서부터 거리를 조정한다.
h1{padding: 10px} border 영역 안쪽의 padding 영역에서부터 거리를 조정한다.
margin과 padding
학습 중 발견한 유의할 점.
<h1 class = "item here">
클래스의 따옴표" " 안에 띄어쓰기를 사용하면
위 h1태그는 item 클래스와 here 클래스 두개에 속한다는 의미이다.
item here 클래스 하나가 아니었다! 나중에 혼동하지 않도록 조심해야겠다.
<table> 태그로 <thead>,<tbody>를 지정하지 않고 테이블 생성시, 코드상에는 <tbody>가 보이지 않지만, 웹상에서는
<tbody>태그로 테이블 행들을 자동으로 포함한다. 그래서 자식 선택자로 테이블 내의 태그를 선택할 시 <tbody>를 포함해야 하는 경우가 발생한다.
마무리
CSS에 정말 많은 선택자가 있지만, 비단 프로그래밍 언어 뿐만이 아니라 모든 언어에서, 모든 단어를 외워서 사용하는 것은 불가능하고, 비효율 적이다. 그래서 대부분 기본적인 선택자를 숙지하길 권하고 다른 선택자는 사용해보면서, 라이브러리를 참고하면서 익히길 추천하는 편이다.
그래서 이곳에 CSS 태그,속성 등이 정리된 사이트 링크를 남긴다.
'자바 초보개발 > HTML' 카테고리의 다른 글
문서 객체 모델 (0) 2023.12.06 JS 기초 (0) 2023.12.04 양식 <form> 태그 (2) 2023.11.28 colspan과 rowspan (0) 2023.11.27 스크립트 언어,HTML 시작 (3) 2023.11.27