background-repeat: 브라우저 화면에 가득 찰때 까지 가로와 세로로 반복하는 것이 기본값. no-repeat을 자주 씀.

background-position: 배경 이미지의 위치를 조절

[background-position: <수평 위치> <수직 위치> ;]

background: tor url(() no-repeat center bottom fixed;

속성값이 다르므로 입력 순서는 상관 없습니다.

<style>
        /*img{
            background-origin: content-box;
            right: 0;
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
        }
        p{
            position: relative;
        }*/
        body{
            background: white url("../images/tulip.gif") no-repeat fixed center right;
            color: #665544;
            padding: 10px;
        }
        span{
            font-weight: bold;
            font-style: italic;
        }
    </style>

선택자: 스타일 시트를 적용할 대상.

전체 선택자: *.와일드 선택자라고도 하며 모든 HTML태그 선택

아이디와 클래스의 차이: 아이디는 한번만, 클래스는 복수 요소에 적용.

연결 선택자: 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자(컴비네이션 선택자, 조합 선택자)

하위 선택자:

  • 부모 요소에 포함된 모든 하위 요소에 스타일이 적용된다.
  • 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용
  • 하위 선택자를 정의 할 때는 상위 요소와 하위 요소를 나란히 쓴다.

[상위요소 하위요소] //이것때문에 띄어쓰기 함부러 하면 안됨.

section p{...(section 요소 안의 모든 p 요소에 적용할 스타일 규칙)}

section p{/*section 요소의 모든 하위 p 요소에 적용*/
            color: blue;
        }

자식선택자: 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자

[부모요소>자식요소]

section > p{/*section 요소의 바로 아래 하위 p 요소에 적용 다른것들은 <div> 밑에 있어서 안됨*/
            color: blue;
        }
<section>
        <h1>예약 방법 & 사용 요금</h1>
        <p>아직 온라인 예약 신청이 준비되어 있지 않습니다.
            <br />전화 (xxx-xxxx-xxxx)로 문의 바랍니다.
        </p>
div#header p{
            color: green
        }
<div id="header">
            <p>가족실(2~4인) : 60,000원/일</p>
            <p>도미토리(4인 공용) : 25,000원/일</p>
        </div>

형제 관계: 웹 문서에서 부모 요소가 같을 경우

인접 형제 선택자: 형제 요소 중에서 첫번째 동생 요소만 선택하는 것(상위 요소 기점)

[요소1+요소2]

형제 선택자: 모든 형제 요소 적용

[요소1~요소2]

        h1+p{
            background-color: #222;
            color: #fff;
        }
        h1~ul{
            background-color: #222;
            color:aqua;
        }

 

<body>
    <section>
        <h1>예약 방법 & 사용 요금</h1>
        <p>아직 온라인 예약 신청이 준비되어 있지 않습니다.
            <br />전화 (xxx-xxxx-xxxx)로 문의 바랍니다.
        </p>
        <div id="header">
            <p>가족실(2~4인) : 60,000원/일</p>
            <p>도미토리(4인 공용) : 25,000원/일</p>
        </div>
    </section>
    <setion>
        <h1>예약 방법 및 요금</h1>
        <ul>
            <li>직접 통화</li>
            <li>문자 남기기</li>
        </ul>    
        <ul>
            <li>1인 : 40,000원</li>
            <li>2인 : 60,000원</li>
            <li>3인 : 80,000원</li>
            <li>4인 : 100,000원</li>
        </ul>
    </setion>
</body>

 

#table>tr*2>td*3

 

[속성] 선택자: 지정한 속성을 가진 요소를 찾아 스타일 적용

[원하는 속성]

a[href] //href 속성이 있는 a 요소를 찾는 선택자

 

[속성=속성값] 선택자: 주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일 적용

a[target = _blank]{..} // <a target="_blank">인 요소

a태그 밑줄 없애는 법 text-decoration:none(p.217)

새로운 창: target

[속성~=값] 선택자: 여러 속성 값 중에 해당 값이 포함되어 있는 요소를 찾아 스타일 적용

[class~=button]{..} class값 중에 button이 있는 요소

[속성|=값] 선택자: 특정 속성값이 포함된 속성 요소를 선택

[속성^=값] 선택자: 즉정 속성값으로 시작하는 속성 요소

[속성$=값] 선택자: 특정한 값으로 끝나는 속성의 요소

[속성*=값] 선택자: 값의 일부가 일치하는 속성을 가진 요소를 찾아 스타일 적용

가상 클래스(가상 선택자): 사용자 동작에 반응

  1. 방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자'
  2. 방문한 링크에 스타일을 적용하는 ':visited 가상 클래스 선택자'
  3. 특정 요소에 마우스 포인터를 올려놓으면 프타일을 적용하는 ':hover 가상클래스 선택자'
  4. 웹 요소를 활성화 했을 때 스타일을 적용하는 ':active 가상 클래스 선택자'
  5. 웹 요소에 초점이 맞추어 졌을 때 스타일을 적용하는 ':focus 가상 클래스 선택자'
  6. 앵커 대상에 스타일을 적용하는 ':target 가상 클래스 선택자'
  7. 요소의 사용 여부에 따라 스타일을 적용하는 ':enabled와 :disabled 가상 클래스 선택자'
  8. 선택한 항목의 스타일을 적용하는 ':checked 가상 클래스 선택자'
  9. 특정 요소를 제외하고 스타일 적용 ':not 선택자'

구조 가상 클래스: 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자.

:only-child 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택
A:only-type-of 부모 안에 A 요소가 하나뿐일 때 선택
:first-child 부모 안에 있는 모든 요소중에서 첫번째 자식 요소를 선택
:last-child 부모 안에 있는 모든 요소중에서 마지막 자식 요소를 선택
A:first-of-type 부모 안에 있는 A 요소중에서 첫번째 요소를 선택
A:last-of-type 부모 안에 있는 A 요소중에서 마지막 요소를 선택
:nth-child(n) 부모 안에 있는 모든 요소중에서 n번째 자식 요소를 선택
:nth-last-child(n) 부모 안에 있는 모든 요소중에서 끝에서 n번째 자식 요소를 선택
A:nth-of-type(n) 부모 안에 있는 A 요소중에서 n번째 요소를 선택
A:nth-last-of-type(n) 부모 안에 있는 A 요소중에서 끝에서 n번째 요소를 선택

수식을 사용해 위치 지정 :nth-child(odd) :nth-child(even)

가상요소: 화면 꾸미기용 요소를 웹 문서에 포함시키지 않기 위해 가상요소를 사용

  • ::first-line : 첫번째 줄에 스타일 적용
  • ::first-letter: 첫번째 글자에 스타일 적용
  • ::before: 요소의 앞에 텍스트나 이미지 추가
  • ::after: 요소의 뒤에 텍스트나 이미지 추가
<style>
        body p{
            font-size: 20px;
        }
        body p:nth-child(odd){
            color: blue;

        }
        body p:nth-child(even){
            color: rgb(255, 153, 0);

        }
        p::first-letter{
            background-color: gray;
            color: white;
            font-weight:bolder;
            font-size: larger;
        }
    </style>

'HTML+CSS+자바스크립트' 카테고리의 다른 글

Js변수  (0) 2023.05.26
자바스크립트  (0) 2023.05.25
CSS,박스 모델  (0) 2023.05.23
p.233,234,235 예제  (0) 2023.05.22
p.191, 192 예제  (0) 2023.05.22

+ Recent posts

티스토리툴바