CSS3

728x90

장점 : 모든 페이지들이 동일한 CSS를 공유

단점 : CSS 코드를 봐야 화면을 예측가능 - 불편하다.

CSS3의 문법

p { backgroud-color : yellow; }

선택자 { 속성(프로퍼티) : 값(value); }

괄호안에 세미클론을 찍어야 정상 작동한다.

선택자의 종류

타입선택자 : HTML 요소를 사용
전체선택자 : *을 찍어서 페이지 안의 모든 요소 선택
아이디 선택자 : 특정한 요소를 선택, id가 target인 요소를 선택한다. [접두어 #]#으로 표기
클래스 선택자 : 그룹핑해서 해당 영역 요소만 선택한다. [접두어 . ].으로 표기
선택자 그룹 : 타입선택자만 쓴다. h1,h2,h3……
자손,자식,형제 결합자 : 상속의 개념은 아니다. 내 위의 부모view같은녀석. body em{ color:red; } 띄어쓰기를 조심한다.
의사클래스 : a:link { color : blue; } a에 링크가 걸려있으면 blue값으로 설정한다.
속성 선택자 : 특정한 요소를 가지는 요소를 선택한다. h1[title] {color:blue;}

CSS 삽입위치

외부 스타일 시트 : HTML외부에 작성

내부 스타일 시트 : head영역안에 style영역에 코드를 작성

인라인 스타일 시트 : 요소안에 스타일을 지정한다.

다중 스타일 시트 : 요소가 충돌나는 상황에서는 우선순위가 존재한다.

인라인
외부스타일
내부

CSS속성

color : 텍스트 색상

자주쓰는것들은 이름으로 표현된다. “red”

16진수 ##FF0000

10진수는 rgb함수로 호출(255,0,0)

퍼센트로 표현(100%,0,0)

font-weight (스네이크표기법) : 볼드체 설정

padding : 요소의 가장자리와 내용간의 간격

font-size : 폰트의 크기

border : 요소를 감싸는 경계선

font-style : 이탤릭체 설정

text-align : 텍스트 정렬(가로축 정렬만된다. ) → 세로 정렬은 단순하지 않다…

list-style : 리스트 스타일

폰트

폰트의 단위 : 키워드, em (배수)

텍스트

영어는 띄어쓰기 없으면 엔터 적용이 안됨

마진과 패딩

시계방향으로 돌림

수평정렬

인라인요소, 블럭요소의 정렬이 다르다.

블럭 : text-align

인라인 : layout-gravity와 같은 느낌

배경설정

repeat과 사이즈 설정도 가능

블럭요소일때

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>박스 모델(요소의 크기 및 배경)</title>
        <style>
            p.aa{
                /* 경계선 */
                border-style: solid;
                border-top-style: dotted;
                border-width: thin;
                border-width: 2px;
                border-bottom-width: 8px;

                border-color: red;
                border-right-color: blue;

                border-radius: 20px;
                border-bottom-left-radius: 0px;
                border-top-right-radius: 0px;

                /* 경계선을 이미지가 보일 정도의 두께로 설정 */
                border: 30px solid transparent;

                /* 경계선 이미지 */
                border-image-source: url(./image/border.png);
                border-image-slice: 30 30;    /* 높이 너비  : 기본 스트레치 모드이다*/
                border-image-repeat: round;

                /* 요소의 크기 */
                /* 나를 감싸는 부모의 크기를 고려하여 작성해야한다.  */
                width: 70%; 
                height: 300px;

                /* 요소의 콘텐츠가 아니라 요소 자체를 가운데 정렬 */
                margin-left: auto;
                margin-right: auto;

            }

            /* 선택자 그룹으로 묶어서 100% 주자 */
            html, body{height: 100%;}
            

        </style>
    </head>
    <body>
        <!-- 경계선 border / 요소의 크기 / 가운데 정렬 -->
        <!-- html, body의 높이가 wrap이다. 부모 기준으로 퍼센트를 먹는다.  -->
        <p class="aa">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore est dicta aut alias omnis exercitationem, rem, laborum autem quo, eligendi maiores. Quisquam vero repellat iste nesciunt animi repellendus tenetur molestiae?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla omnis perspiciatis asperiores quisquam. Enim, architecto maxime, eaque natus, praesentium sint mollitia quos dolor nisi nobis eius? Laborum obcaecati iste sunt.

        </p>
    </body>

</html>

테이블의 특이한 점

제일 특이한거 : 직접 요소를 만들지 않았지만 테이블에 숨어있는 요소가 존재 **>는 자식 **중간에 진짜 아빠가 숨어있다. table Body **table은 사실 자식을 3명만 가질수있다. table header,table body,table footer **table body는 무조건 만들어진다. 나머지는 안만들어짐

단점 : CSS 코드를 봐야 화면을 예측가능 - 불편하다.

DOM (Document Object Model) Tree

테이블의 특이한 점

<!DOCTYPE html>

<html>

<head>

<style>

/* 이 영역안에서는 CSS문법 체계를 따름 */

/* 기본 문법 - 선택자{ 속성 : 값; } */

/* body의 요소를 찾는 선택자의 종류*/

/* 1. 타입(요소)선택자 */

h2{color: red;}

p{color: blue; font-family: serif;}

/* 2. 전체선택자 : 선택자 우선순위로 요소선택자가 가장 높다. 써져있는 순서가중요한게 아님. (똑같은 속성이라면 마지막게 적용.)*/

/* 범위가 적은게 (즉, 개별선택자) 우선순위가 높다. */

*{font-style:italic; color: yellow;}

/* 3. 아이디 선택자 : 좁게 잡히므로 우선순위가 높다. */

#p1{color: green;}

/* 4. 클래스 선택자 : Java의 클래스와 상관없다. */

.aa{color:violet}

/* 5. 선택자 그룹 : 요소를 선택*/

li,a{color: gray;}

/* 6. 자손,자식,형제결합자 : 자손 선택자는 자식선택자까지 포함된다. */

/* 자손선택자는 주의가 필요하다. */

#ss>p{color: black;}

#ss p{color: lime;}

/* 아래 둘은 완전히 다름 :스페이스는 자손을 말함 */

p.aa{} /* p요소중에서 클래스 속성값이 aa인 요소 */

p .aa{} /* p요소의 자손들 중에서 클래스 속성값이 aa인 요소 */

/* 복합적으로 사용하는 선택자 */

#kk ul.gg>li{background-color: aqua;}

/* 7. 속성 선택자 : p중에서 [class]라는 요소를 가진녀석 */

p[class]{font-size: 30px;}

div[id="ss"]{font-weight: bold; background-color: antiquewhite;}

/* 8. 의사(수도) 선택자 :나는 만든적이 없는데 그 기능이있다, visited는 방문기록이 남아있다. */

a:link{color:blue;}

a:visited{color:brown;}

a:hover{color: green;}

a:active{color: yellow;}

/* 둘째는 따로 이름이 없다. n번째 자식 */

#kk ul li:first-child{color: red;}

#kk ul li:last-child{color:green}

#kk ul li:nth-child(2){color: blue;}

/* 수식을 이용한 n번째 자식 요소 선택 */

/* n값은 자동으로 늘어난다. 음수를 고려하여 +1로한다. */

table tr:nth-child(2n+1){background-color: aqua;}

</style>

</head>

<body>

<h2 class="aa">CSS Selector Test</h2>

<p id="p1">Hello world</p>

<ul>

</ul>

<a href="">NEVER</a>

<h4>Region</h4>

<p>Hello World - ss의 자식</p>

<div>

<p>Apple</p>

<p>Orange</p>

<p>Banana</p>

</div>

<ul>

</ul>

</ul>

</div>

<a href="https://www.google.com">Google</a>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

CSS3

/* 바로쓴다. 여긴 html 영역이아니라서 브라우저를 볼수없다. */

p{color: blue;}

<!DOCTYPE html>

<html>

<head>

<style>

p{color: red;}

</style>

<!-- 3. 인라인 스타일 시트 : 요소 안에 쓴다. 우선순위가 가장 높다.

순서상관없이 최종적으로 적용된다. -->

</head>

<body>

<p style="color: green;">Hello world</p>

<style>

p{color: blueviolet;}

</style>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

/* 폰트의 글꼴 지정 */

p{font-family: "Blippo Blk BT",sans-serif;}

p{font-family: "휴먼매직체",sans-serif;}

p{font-family: monospace;}

/* 모든 컴퓨터에서 동일한 폰트로 보여지려면 */

/* 웹폰트 사용 : 개발자의 커스텀 폰트 지정 */

/* 경로는 무조건 url 함수로 쓴다 */

@font-face{

font-family: "MyFont";

src: url(./font/kmi_bold.ttf);

}

p{font-family: "Myfont",sans-serif;}

/* 폰트의 크기 */

/* 키워드를 이용하는 방법 */

p{font-size: small;}

/* 수치값을 쓰는 경우 */

p{font-size: 16px;}

/* 권장사이즈 : 비율을 이용한 사이즈 1.5배(권장) */

p{font-size: 2em;}

/* bold, normal */

p{font-weight: bold;}

/* italic, normal */

p{font-style: italic;}

/* 폰트속성 4개를 한번에 축약형으로 설정 */

/* 순서가 정해짐 : [weight/style,size,family] */

p{font: bold italic 200% "Myfont","휴먼옛체",serif;}

/* 텍스트에 관련된 속성들 */

/* 텍스트 정렬 */

p{text-align: center;}

p{text-align: right;}

p{text-align: justify;}

/* 텍스트 변환[대소문자 변환] */

p{text-transform: uppercase;}

p{text-transform: lowercase;}

p{text-transform: capitalize;}

/* 텍스트 선긋기 */

p{text-decoration: overline;}

p{text-decoration: underline;}

p{text-decoration: line-through;}

p{text-decoration: none;}

/* 텍스트 그림자 */

p{text-shadow: 5px 3px 5px red;}

/* 워드 랩 : .은 class를 의미함 */

p.aaa{

border: 1px solid blue;

width: 5em;

word-wrap: break-word;

}

#bbb{

column-count: 2;

column-gap: 80px;

column-rule: 4px dashed green;

}

</style>

</head>

<body>

<p>Hello world</p>

<p class="aaa">한글은 전혀 문제 없이 자동으로 워드 랩 됩니다.

aaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis corrupti dolor molestias id, assumenda voluptas itaque dolore necessitatibus a provident similique consequuntur porro alias aspernatur libero temporibus culpa? Cum, laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem libero ipsam porro, maiores ut temporibus, blanditiis cupiditate natus, officiis error possimus voluptatum ipsum ducimus delectus quos. Fuga laborum assumenda voluptate.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe consequatur autem, quo praesentium velit totam sit ad nihil eveniet laboriosam odit sed aspernatur error tempora labore asperiores sequi, quod fugiat.

</p>

<div style="text-align: center; background-color: aqua; height:5em ;">Hello</div>

<span style="text-align: center; background-color: blanchedalmond; line-height: 5em;">Hello</span>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.aa{

/* 경계선 */

border-style: solid;

border-top-style: dotted;

border-width: thin;

border-width: 2px;

border-bottom-width: 8px;

border-color: red;

border-right-color: blue;

border-radius: 20px;

border-bottom-left-radius: 0px;

border-top-right-radius: 0px;

/* 경계선을 이미지가 보일 정도의 두께로 설정 */

border: 30px solid transparent;

/* 경계선 이미지 */

border-image-source: url(./image/border.png);

border-image-slice: 30 30; /* 높이 너비 : 기본 스트레치 모드이다*/

border-image-repeat: round;

/* 요소의 크기 */

/* 나를 감싸는 부모의 크기를 고려하여 작성해야한다. */

width: 70%;

height: 300px;

/* 요소의 콘텐츠가 아니라 요소 자체를 가운데 정렬 */

margin-left: auto;

margin-right: auto;

/* 선택자 그룹으로 묶어서 100% 주자 */

html, body{height: 100%;}

}

/* 인라인요소 - 너비지정 불가*/

a{background-color: red; width: 200px; }

em{background-color: aqua; width: 100px;}

/* 인라인 블럭요소 - 너비지정 가능 */

img{width: 500px; border: 1px solid black;}

input{background-color: aqua; width: 100%;}

</style>

</head>

<body>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore est dicta aut alias omnis exercitationem, rem, laborum autem quo, eligendi maiores. Quisquam vero repellat iste nesciunt animi repellendus tenetur molestiae?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla omnis perspiciatis asperiores quisquam. Enim, architecto maxime, eaque natus, praesentium sint mollitia quos dolor nisi nobis eius? Laborum obcaecati iste sunt.

</p>

<a href="">anchor</a>

<em>Hello</em>

</div>

<style>

/* bottom, top마진은 기본적으로 겹친다. 20px, 10px라고해도 20px만 설정된다. */

#p1{background-color: red; margin: 0px; height: 50px; margin-bottom: 20px;}

#p2{background-color: green; margin: 0px; height: 50px; margin-top: 10px;}

/* 음수 마진을 주면 요소가 겹침 */

#p1{background-color: red; margin: 0px; height: 50px; }

#p2{background-color: green; margin: 0px; height: 50px; margin-top: -20px; width: 50%;}

</style>

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt numquam asperiores nesciunt odio tempora error explicabo. Ipsum doloremque, debitis vitae, voluptate error dignissimos nesciunt obcaecati autem dolorum similique consectetur saepe.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum harum tenetur alias ipsa, sunt in ducimus delectus quam omnis officia deleniti. Voluptate beatae, quasi quia nam officiis deserunt vel veritatis.

</p>

<style>

p.back{

background-color: green;

/* 이미지가 요소보다 작다면 바둑판처럼 그림이 여러개 들어온다. */

background-size: 200px 100px;

background-repeat: repeat-x;

background-repeat: no-repeat;

background-position: center;

background-position: right top;

background-position: top center;

}

</style>

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde aliquam officia atque et sunt laborum nobis ad ipsa quod suscipit doloribus, tempore voluptate blanditiis cum nulla accusamus dicta ratione illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas autem minima laudantium porro placeat nihil eligendi vitae architecto reiciendis sint, vel voluptates rem animi doloremque accusamus odio sapiente quia quas?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi debitis ab, consectetur nobis nesciunt quibusdam perspiciatis. Cupiditate vitae ipsa accusamus earum, odit id. Dolore deserunt alias molestiae, dolor sit dolorum.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea ipsam minus nulla nisi doloribus laboriosam ducimus dolorem unde tempora soluta iste assumenda eius sint repudiandae itaque, nihil veniam in? Laudantium!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, repellat neque minus omnis saepe ipsam officia magnam atque eligendi necessitatibus. Ex voluptatibus ipsa maiores? Deserunt a saepe ipsum neque odio!

</p>

<style>

/* 부모는 틀에 불과하다. 자식이 영역밖으로 흘러넘칠수도있다. */

#attach{

width: 60%;

margin-left: auto;

margin-right: auto;

height: 300px;

border: 2px solid blue;

overflow: scroll;

/* 스크롤 박스의 배경을 이미지로 준ㄴ다 */

background-size: 200px 100px;

background-repeat: no-repeat;

background-position: center;

background-attachment: scroll; /* 액자에 붙어있는 느낌*/

background-attachment: local; /* 콘텐츠에 붙어있는 느낌*/

background-attachment: fixed; /*브라우저에 배경 이미지가 붙어있다. 단, 요소 안에서만 보여짐*/

}

</style>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>anchor, list, table style</title>

<style>

a:link{color: blue;}

a:visited{color: brown;}

a:hover{color: red; font-size: 2em;}

a:active{color: yellow;}

/* 작성 순서가 다르면 동작 안될 수 있음. */

/* 안드로이드에서는 액티브에다가 건다 */

#aa:hover{background-color: green;}

img{background-color: yellow; border: 2px solid red;}

img:hover{background-color: gray; width: 100%;}

</style>

</head>

<body>

<a href="https://www.naver.com/">aaaaaa</a>

<p id="aa">Hello</p>

<hr>

<li>JavaScript</li>

</ul>

<style>

ul.a{list-style-type: circle;}

ul.a{list-style-type: disc;}

ul.a{list-style-type: square; list-style-position: inside;}

ul.a{list-style-image: url(./image/border.png);}

</style>

<li>JavaScript</li>

</ol>

<style>

ol.b{list-style: lower-alpha;}

ol.b{list-style: lower-latin;}

ol.b{list-style: lower-roman;}

ol.b{list-style: lower-greek;}

ol.b{list-style: decimal-leading-zero;}

</style>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

/* 네비게이션 메뉴 만들기 , 우선 블릭 기호를 빼자*/

ul{

list-style: none;

border-top: 1px solid red;

border-bottom: 1px solid red;

padding: 10px 0px 10px 0px;

text-align: center;

}

ul li{

display: inline;

text-transform: uppercase;

/* 이렇게 2개쓰면 위아래/ 양옆으로 패딩을 준다. */

padding: 0px 10px;

letter-spacing: 10px;

/* 착각하기 쉽다. list도 콘텐츠이다. 이 안에 정렬하는건 마진이 아니라 텍스트얼라인이다. */

}

ul li a{text-decoration: none; color: black; }

ul li a:hover{text-decoration: underline};

</style>

</head>

<body>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

table{border: 2px solid; border-collapse: collapse; text-align: center;}

/* th를 두번씀 : 비효율적인게 아님, 공통으로 하는것/ 따로하는것 나눔 */

th,td{border: 1px solid; padding: 10px 5px; }

th{background-color: green; color : white}

tr:nth-child(2n+0){background-color: yellow;}

td:first-child{width: 40%;}

th{border-bottom: double red;}

/* 제일 특이한거 : 직접 요소를 만들지 않았지만 테이블에 숨어있는 요소가 존재 */

/* >는 자식 */

/* 중간에 진짜 아빠가 숨어있다. table Body */

/* table은 사실 자식을 3명만 가질수있다. table header,table body,table footer */

/* table body는 무조건 만들어진다. 나머지는 안만들어짐*/

table>:nth-child(1){border: 10px solid blue;}

/* 이렇게 써봐, 우선순위로 인해 맨 처음꺼는 파란색그대로이다. */

table tr{color: red;}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>localHost</title>

<style>

body{

background-color: green;

background-repeat: no-repeat;

}

#aaa{

background-color: yellow;

border: 6px dotted red;

margin-left: 200px;

background-repeat: no-repeat;

text-align: left;

}

</style>

</head>

<body>

<p>CSS3는 W3C에서 한창 개발 중인 규격이다.

W3C사이트에서 보면 CSS3 규격 중에서 완료된 것(recommendation)도 있고

아직 한창 토의 중인 규격(working draft)도 있음을 알 수 있다.

CSS Snapshot 2010 문서를 보면 CSS3 개발 현황을 알 수 있다. </p>

</div>

</body>

</html>

728x90

저작자표시 비영리 변경금지

'HTML,CSS,JavaScript' 카테고리의 다른 글

CSS 회원가입 창 만들기 (0)	2023.05.03
CSS 레이아웃2 (0)	2023.05.03
CSS 레이아웃 (0)	2023.05.03
HTML 멀티미디어 (0)	2023.05.02
HTML WebUI 구현 (0)	2023.05.02

안드로이드 히예

CSS3

CSS3의 문법

선택자의 종류

CSS 삽입위치

CSS속성

폰트

텍스트

마진과 패딩

수평정렬

배경설정

블럭요소일때

테이블의 특이한 점

DOM (Document Object Model) Tree

테이블의 특이한 점

'HTML,CSS,JavaScript' 카테고리의 다른 글

티스토리툴바

CSS3

CSS3의 문법

선택자의 종류

CSS 삽입위치

CSS속성

폰트

텍스트

마진과 패딩

수평정렬

배경설정

블럭요소일때

테이블의 특이한 점

DOM (Document Object Model) Tree

테이블의 특이한 점

'HTML,CSS,JavaScript' 카테고리의 다른 글

관련글

티스토리툴바