Table
<table border="1" bordercolor="red"
cellspacing="15" cellpadding="10"
width="300" height="200"
bgcolor="pink" align="center"
background="images/book.jpg">
border : 경계선
bordercolor : 경계선의 색
cellsapcing: 칸 바깥쪽의 공간
cellpadding: 칸 안쪽의 공간
bgcolor: 배경색
align: 정렬
background:배경
<tr bgcolor="#8041D9">
<td bgcolor="yellow">가</td>
<td>나</td>
<td>다</td>
</tr>
<tr>
<td>라</td>
<td>마</td>
<td>바</td>
</tr>
tr : 줄
td : 칸
배경색은 지정 컬러가 아닌 RGB의 각각의 값을 16진수로 변환하여
색을 직접 설정 할 수 있다. 앞에 #을 붙여야 한다.
내부 브라우저와 외부 브라우저 변경 방법
Window-Web Browser- 선택
rowspan: 위아래 칸 합치기
colspan: 양옆 칸 합치기
tr에서의 align : 글자의 위치를 가로세로로 정렬
valign : 위아래로 정렬
CSS
Cascading Style Sheet : 연속적인 스타일 시트
인라인 스타일 방식
<h1 style="font-size:30px; color:cyan">블록 요소에 인라인 방식으로 CSS 적용하기</h1>
<p style="font-size:15px; color:#ff00dd; line-height:150%; background-color:green;">
Vegetables fit for use are recognized by the small sprout.<br />
쓸모있는 야채는 어린 싹으로 알 수 있다. 될성 싶은 나무는 떡잎부터 알아본다.</p>
<span style="color:pink;">야채</span>
블럭 요소와 인라인 요소(span등의 특정 한단어 혹은 구간만 갖는 요소)에
적용 가능하다.
내장 CSS 방식
<head> </head> 태그 안쪽에 작성해준다,
<style type="text/css">
p {
background-color: gray;
color:blue;
width:300px;
}
</style>
외장 CSS 방식
style.css라는 파일을 만든뒤
body {
background-color: yellow;
line-height: 200%;
}
h1{
color: cyan;
font-size: 40px;
}
설정해주고
<head></head> 태그 안에
<link rel="stylesheet" type="text/css" href="style.css">
링크 타입으로 설정해준다 rel과 type은 고정이다.
Class 선택자와 ID선택자
둘의 차이는 ID는 보통 한곳에만 적용하고 싶을때 사용하고(여러번 사용해도 기능은 한다.)
다중사용시에는 class선택자를 사용한다.
둘 다 head 태그 안쪽에 쓰고 호출하는 방식.
Class 선택자
.cook1{
border: 1px solid blue;
color:pink;
}
바디
<h2 class=cook1>
ID 선택자
#box1{
font-size:50px;
width : 200px;
}
바디
<h3 id="box1">
속성 선택자(태그 선택자)
a[target]{
color:green;
font-size: 15px;
text-decoration: none;
}
a 태그에서 target 속성이 있는 곳에만 적용되는 선택자
응용
a[title="조주기능사"] :a태그에서 title이 조주기능사일때
a[title ^= "제과"] : 제과로 시작할때
a[title $= "기능장"] : 기능장으로 끝날때
a[title *= "산업"] : 산업이 중간에 있을때
h2 요소안에 삽입된 span 요소를 이용하여 선택자를 정의하기.
h2 > span { }
가상 클래스 선택자
a:hover : a태그에 마우스를 클릭하지 않고 올렸을때
a:visited : 방문을 하고 난 뒤
첫번째 li 태그하기
li:first-child{
color:lime;
}
짝수번째 li 태그하기
li:nth-child(even) {
color:blue;
}
세번째 li 태그하기
li:nth-child(3) {
color:red;
}
전체 선택자
html 전체 요소의 CSS 속성을 정의하기
* {
background-color: yellow;
margin:20px; margin- 여백 설정
}
그룹 선택자
h1,h2,h3,h4{
font-size: 20px;
font-family: "맑은 고딕",궁서; 1번이 없으면 2번으로 적용한다.
}
쉼표를 통해 묶어준다.
자손 선택자
자손이란 자식의 자식 같은 케이스를 말한다. 자식도 자손에 포함된다.
body h2{ --띄어써준다
}
body>div>h2의 자식순이다.
[선택자]
태그 선택자
자식 선택자
자손 선택자
클래스 선택자
아이디 선택자
속성 선택자
가상 선택자
그룹 선택자
전체 선택자
우선 순위
인라인 스타일 방식 > 클래스/속성/가상 선택자 > 아이디 선택자 > 태그 선택자 > 전체 선택자
span{
color:red !important;
}
!important를 통해 상당히 뒤에 있던 태그 선택자를 가장 먼저 처리하게 한다.
div:first-child>h2{ /* #box1>h2 */
font-family: "Times New Roman", sans-serif;
font-size: 20pt; /* 10pt=13px=0.8em */
font-weight: bold;
font-style: italic;
}
#box3>h2{
font: italic 20pt bold "Times New Roman",sans-serif;
}
둘의 기능은 같다.
#list1{
list-style-image: url(./../images/arrow.gif);
}
./ : 현재 위치
../ : 현재 위치의 상위 폴더
trbl: top right bottom left 의 약자 padding을 통해 여백 지정할때
trbl순으로 지정한다. 다 같은 값이라면 한번만 써도 된다.
값을 두개만 적으면 (1.t 2.r 1.b 2.l) 로 된다.
margin-left: 30px; 와 같이 특정 부분 지정도 가능하다.
body{
background-color: silver;
background-image: url(../images/shoes1.png);
background-repeat: repeat-y; -y축을 따라 반복
background-position: top center; -위치
background-attachment: fixed; -스크롤시에도 움직이지 않음
}
div{
background: #fff url(../images/bg1.png) center repeat-y fixed;
}
text-shadow: 10px 20px 15px #000;
x축 y축 번짐정도 색
스페이스바 공백
" 따옴표
& &표시
position
기본 : static
절대좌표 : absolute
대각선진행 : relative
고정 : fixed
<nav> : 메뉴를 설정하고 싶을 때 사용하는 태그(시맨틱 요소)
'Develop > HTML CSS' 카테고리의 다른 글
| 0630 HTML /CSS (0) | 2022.07.04 |
|---|---|
| 0628 HTML Start! (0) | 2022.06.29 |