22년 2월20일_벌써 2월 넷째 주네.., CSS기초코드

IT To do and To was

22년 2월20일_벌써 2월 넷째 주네.., CSS기초코드

금호동짜세 2022. 2. 20. 23:25

728x90

일요일[이번주는 빨리 지나갔으면 좋겠다.]

1. 웹디자이너기능사 필기

1. 오쌤의 니가스터디

º CSS

레이아웃만 잘하면 된다고함

-영역잡기

width, hight 가로, 세로

margin 요소의 바깥쪽 여백 :px;

padding 안쪽여백 :px; (자손과의 여백)

box-sizing: border-box 패딩과 border영역을 안쪽으로 인사이드 처리

-폰트설정(글자관련 속성)

font-family: "맑은 고딕", sans-serif;

font-size : px;

color: whtie

line-heigt(줄간격) : px;

text-aling:center; (가로 정렬 속성)

text-decoration : underline; (밑줄처리)

text-decoration : none; (밑줄 없애기)

}

-위치지정

float : 왼쪽혹은 오른쪽으로 left; or right;

※ div 태그는 원래 수직나열된다.

position : absolute; 절대적 위치 위치를 지정하지 않으면 곂침

top : y축이동, left x축 이동

z-index : 10; 깊이조절속정, 숫자가 높을 수록 앞에처리

position : relative;자손의 절대적 위치 기준을 body에서 부모요소로 변경

-:hover(마우스를 올린상태)

a:hover{

opacity:투명도 조절 0.5;} 0.0~1.0까지

-기타속성

테두리와 투명도

border테두리 속정 : px soild black;

p{
    width: 300px;
    height: 100px;
    background-color: aliceblue;
    font-family: "맑은고딕", sans-serif;
    font-size: 50px;
    color: aquamarine;
    text-align: center;
    line-height: 10px;

}
div{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    float: left;
    border: 3px soild black;
    margin: 10px;
    padding: 10px;
    position: absolute;

}
.box1{
    background-color: antiquewhite;
    top: 30px; left: 30px;
    z-index: 10;

}
.box2{
    background-color: rebeccapurple;
    top: 60px; left: 60px;
}
.box3{
    top: 90px; left: 90px;
}
.child{
    position: absolute; top: 0; right: 0;
}
a{
    text-decoration: none;
}
a:hover{
    color: palevioletred;
}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Dharyul</title>
    <link rel="stylesheet" href="commn.css">
</head>
<body>
   <p>하률</p>
   <div class ="box1"><div class = "child">test</div></div>
   <div class ="box2"><div class = "child">test</div></div>
   <div class ="box3"><div class = "child">test</div></div>
   <a href="#">링크태그</a>
</body>
</html>

//yesterday wished to today list

. 웹디자인기능사 실기 영상 보기 ✔️

. 인내심기르기 ✔️

. 걸러서 말하기 ✔️

tomorrow wish list

. 인내심기르기

. 걸러서 말하기

. 리눅스 수업 잘 따라가기

728x90

저작자표시 (새창열림)