주석 

<!-- -->




display 속성

화면에 어떻게 보이는지 설정한다.


(1)block

<div>. <p>, <li> 같이

블럭 쌓듯이 층층이 쌓는 것


(2)inline

<span> 같이

옆으로 붙여나가는 것


(3)inline-block

block의 속성 갖고 옆으로 붙여나간다.

옆으로 정렬 되면서 높이의 속성도 가짐.


(4)none

자리 포함 모든것이 화면에서 지워짐






visibility 속성

visibility:hidden

자리는 남고 화면에서만 지움





opacity 속성

투명도를 조절한다.

숫자가 작을수록 투명해진다.

opacity:0.7;





★margin과 padding 속성


margin:10px;

오리지널 사이즈는 그대로 있고 상하좌우 10px의 여백이 생김


padding:10px;

오리지널 사이즈에서 상하좌우 10px가 증가


margin:10px 5px;

상하 10, 좌우 5


margin:10px 5px 7px;

상 우 하 좌

왼쪽 값 없으므로 우측 값 재활용하여 7px 적용된다.





box-sizing속성


box-sizing:border-box;

오리지널 크기 안쪽으로 테두리 그려줌

테두리를 포함하여 크기 변화 없음


box-sizing:content-box;

오리지널 크기 바깥쪽으로 테두리 그려줌

테두리 때문에 크기 증가





border 속성


border:15px solid #색상; 

실선


border-style: dashed; 

점선


border-top:5px #색상;

위 테두리만 표시


border-radius:10px; 

테두리 둥글게


 





background속성

(1)

background-image:50%;

이미지 1/4로 축소됨


(2)

background-repeat:no-repeat;

배경에 바둑판 배열을 안 하는 것

디폴트는 바둑판 배열이다.


(3)

background-attachment:fixed;

div의 사이즈 관계없이 브라우저 전체에 적용하는 것

div사이즈가 정해져 있다면 이미지는 짤린다.





font속성


font-family: '폰트이름', '폰트이름', '폰트이름';

첫번째 폰트로 하길 원하는데, 사용자가 폰트를 안 가지고 있으면 뒤에 폰트

그것도 없으면 그 뒤에 폰트, 다 없으면 디폴트 폰트로 보여진다.


font-style:italic;

italic normal;

글자 기울기


font-weight:bold;

600;

글자 굵게


line-height:50px;

행 간격(문장간 상하 간격)


line-height:(width값과 똑같은 값);

글자 세로 중앙 정렬됨


*text-align:center;

가로 중앙 정렬




position 속성


position: absolute;

절대값

좌상단에 붙어 나옴


position: absolute;

top:50px;

left:40px;

좌상단에서 띄어져서 나옴


position: fixed;

화면상에 브라우저에 따라가지 않고

스크롤로 욺직여도 위치 변화없음



position: static;

static이 디폴트 값이다

top, left 값 줘도 무의미 해진다.



position:relative;

top:100px; left 100px;

화면 좌상단에서부터 시작하지 않고

원래 있어야할 자리에서부터 시작




z-index:20;

z-index:10;

깊이 값 조정

숫자가 높을 수록 상단에 놓임

파워포인트의 위로 보내기 처럼


'programing > html5&css3' 카테고리의 다른 글

html 기초 강의 1  (0) 2018.01.29
css3 기초 - gradient 속성 (그라데이션)  (0) 2018.01.09
css3 기초-문자선택자, 링크선택자, 부정선택자  (0) 2018.01.07
css3 기초 - 반응선택자, 상태선택자, 구조선택자  (0) 2018.01.07
css기초 - 선택자와 태그  (0) 2018.01.07

11.문자 선택자

특정 문자 또는 문자열을 선택하여 속성을 설정한다.


(1)첫 번째 글씨

#score::first-letter{

}


(2)첫 번째 라인

#score::first-line{

}


(3)드래그 했을 때의 설정

id="content"의 첫 번째 <p>만 선택하여 ::selection 속성 적용

ex)

#content p:first-child::selection{

background-color:yellow;

color:blue;

}


**********************************


margin:0 auto;


여백을 뜻하고

디폴트는 margin 0 0 0 0; 이다.

상하는 0 값

좌우는 자동으로 반 값씩 갖기 때문에 가운데 정렬이 된다


**********************************


border-bottom:1px;


테두리를 밑에만 준다


**********************************


<p>는 16px이 기본


**********************************


ex)

<!DOCTYPE html>

<html>


<head>

    <meta charset="utf-8" />

    <title></title>



<style>

    #wrap {

        width:800px;

        margin:0 auto;

    }


    #header {

        border-bottom:1px solid #ff6a00;

    }


    #history2:first-letter, #history1::first-letter {

        font-size:2em;

    }


    #history2:first-line, #history1::first-line {

        font-weight:bold;

        color:#4cff00

    }


    #footer ul {

        overflow:hidden;

        border:2px solid #ff6a00;

    }


        #footer ul li {

            list-style:none;

            float:left; 

            padding:20px;

            width:100px;

            height:100px;

        }


</style>

</head>


<body>

    <div id="wrap">


        <div id="header">

            <h1>설립 개요</h1>

        </div>


        <div id="content">

            <p>어쩌구1</p>

            <p id="history2">

                어쩌구저쩌구 tatata

            </p>

            <p id="history1">

                어쩌구저쩌구 blah blah

            </p>

        </div>


        <div id="footer">

            <ul>

                <li><img src="hash3.jpg" /></li>

                <li><img src="hash4.jpg" /></li>

            </ul>

        </div>

    </div>


</body>

</html>








12.링크 선택자

href되어 있는 문자를 선택하여 속성을 설정한다.


첨부된 링크주소를 '-' 뒤에 적어준다.

#content a::after{

content: '-' attr(href);

}









13.부정 선택자

선택한 것을 제외한 나머지에 속성을 적용한다.


li 중 fa가 아닌 나머지에 적용된다.

li:not(.fa){

}





**********************************

padding: 30px 35px;

위아래 간격 / 글자간 간격


**********************************






'programing > html5&css3' 카테고리의 다른 글

css3 기초 - gradient 속성 (그라데이션)  (0) 2018.01.09
css3 기초  (0) 2018.01.08
css3 기초 - 반응선택자, 상태선택자, 구조선택자  (0) 2018.01.07
css기초 - 선택자와 태그  (0) 2018.01.07
html5 기초-태그와 레이아웃  (0) 2018.01.07

8. 반응 선택자


마우스 반응에 따른 속성을 설정한다.


houver : 커서를 갖다댔을 때의 상태


ex)

ul {

foot=size : 30px

color:blue;

}


ul:houver{

color:red;

}


**********************************


margin:30px; 

상하좌우 30픽셀 여백 줌


margin: 5 5 3 3;

상하좌우 개별적으로 여백 주기


margin:0 auto;

가운데 정렬


**********************************


font-size:3em;

글자 3배 커짐


**********************************





9. 상태 선택자


상태에 따라서 css속성이 변화하는 설정을 준다.


input:focus : 글자 입력할 때의 상태

enabled : 글자 입력 한 후의 상태

disabled : 변경 불가능

padding : input하는 곳을 마우스로 눌렀을 때 깜박이는 커서와 input칸 과의 간격


ex)

input:focus {

padding: 15px;

}


input:enabled {

color:#색상번호;

}

input:disabled{

font-weight:bold;

} 



<body>

<form>

비밀번호 : <input type="password" name="upw" value="1004" disabled="disabled"/> 

</form>

</body>





10. 구조 선택자


구조에 따라 변화하는 설정을 준다.


ex)

(1)

li:nth-child(2n*1){


}

홀수 선택


(2)

li:nth-child(2n){


}

짝수 선택


(3)

li:first-child li:last-child{


}

처음과 끝 선택


(4)

li:first-of-type{


}

처음 선택


(5)

li:first-of-type{


}

끝 선택


**********************************


list-style:none;

<ul>의 모양을 없앤다.


**********************************


border-radius:10 10 0 0;

테두리를 둥글게 만든다.

좌상단 우상단 우하단 좌상단 값


**********************************


<a> 태그 중 target="_blank"

(추가)

_blank : 새 창에 열기

_parent: 부모창에 열기

_self:자신의 창에 열기

_top:모든 프레임을 지우고 전체 화면에 열기



**********************************


왼쪽 정렬

float:left;


값 없으면 재활용한다. 30 0 30 0 이 순서대로 적용

border-radius:30px 0;


**********************************


ex)

<!DOCTYPE html>

<html>


<head>

<meta charset="utf-8 /">

<title></title>


<style>


#header, #content, #footer {

width:1000px;

margin:0 auto;

overflow:hidden;

}


#header .left_space, #content .left_space, #footer .left_space {

width:150px; height:150px;

float:left;

background-color:#808080;

border:1px solid #00ffff;

}



#header .center_space, #content .center_space, #footer .center_space {

width:694px; height:150px;

float:left;

background-color:#eaa4a4;

border:1px solid #000000;

}



#header .right_space, #content .right_space, #footer .right_space {

width:150px; height:150px;

float:right;

background-color:#ffd800;

border:1px solid #0094ff;

}



#header .left_space, #footer .right_space{

border-radius:30px 0;

}


#header .right_space, #footer .left_space{

border-radius:0 30px;

}


#content .left_space{

border-radius:0 30px 30px 0;

height:300px;

}


#content .right_space{

border-radius:30px 0 0 30px;

height:300px;

}


#header .center_space{

border-radius:0 0 30px 30px;

}


#content .center_space{

border-radius:30px;

height:300px;

}


#footer .center_space{

border-radius:30px 30px 0 0;

}


#content .center_space ul li{

list-style:none;

float:left;

padding:0 40px;

font-weight:bold;

font-size:20px;

}


#content .hiseoul{

clear:both;

padding:10px;

}

</style>

</head>


<body>




<div id="header">

<div class="left_space"></div>

<div class="center_space"></div>

<div class="right_space"></div>

</div>





<div id="content">

<div class="left_space"></div>

    <div class="center_space">

        <div>

            <ul>

                <li>info</li>

                <li>gallery</li>

                <li>talk</li>

                <li>contact</li>

            </ul>

        </div>

        <div class="hiseoul">

            <h1>타이틀 : 하이서울</h1>

            <p>내용 설명 어쩌구 저쩌구 블라블라 따따따</p>

        </div>

    </div>

<div class="right_space"></div>

</div>






<div id="footer">

<div class="left_space"></div>

<div class="center_space"></div>

<div class="right_space"></div>

</div>





</body>

</html>



'programing > html5&css3' 카테고리의 다른 글

css3 기초 - gradient 속성 (그라데이션)  (0) 2018.01.09
css3 기초  (0) 2018.01.08
css3 기초-문자선택자, 링크선택자, 부정선택자  (0) 2018.01.07
css기초 - 선택자와 태그  (0) 2018.01.07
html5 기초-태그와 레이아웃  (0) 2018.01.07

+ Recent posts

티스토리툴바