[웹 프로그래밍 기초] CSS 속성 -2

10920 단어 CSShtmlJavaScriptCSS

4. 글자 속성

font-style : 글자 스타일
font-weight : 글자 두께 

a {text-decoration:none;}

링크 글자의 밑줄을 제거해줌

5. 위치 속성

position

  • 요소의 위치 지정 형식 설정
  • 절대 위치 좌표 : absolute(절대 좌표),fixed(화면을 기준으로 절대 좌표)
  • 상대 위치 좌표 : relative(초기 위치에서 상하 좌우 이동),static(위쪽에서 아래쪽으로 순서대로 배치)
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>

position을 absolute로 지정한 경우 세 개의 div가 겹쳐서 보인다.

    <style>
    .box{
        width:100px; height:100px;
        position:absolute;
    }
    .box:nth-child(1){background-color: yellow;}
    .box:nth-child(2){background-color: lightgray;}
    .box:nth-child(3){background-color: skyblue;}
    </style>

left와 top을 지정해주면 겹쳐있던 div가 모두 보인다.

   <style>
    .box{
        width:100px; height:100px;
        position:absolute;
    }
    .box:nth-child(1){
        background-color: yellow;
        left:10px; top:10ox;
    }
    .box:nth-child(2){
        background-color: lightgray;
        left:50px; top:50px;
    }
    .box:nth-child(3){
        background-color: skyblue;
        left:90px; top:90px;
    }
    </style>

z-index 를 이용하면 숫자가 클수록 앞에 위치한다. 

<style>
    .box{
        width:100px; height:100px;
        position:absolute;
    }
    .box:nth-child(1){
        background-color: yellow;
        left:10px; top:10px;
        z-index:3 ;
    }
    .box:nth-child(2){
        background-color: lightgray;
        left:50px; top:50px;
        z-index:2 ;
    }
    .box:nth-child(3){
        background-color: skyblue;
        left:90px; top:90px;
        z-index:1 ;
    }
    </style>

내용이 요소 크기를 벗어날 때 처리

overflow

  • 내용이 요소 크기를 벗어나 모두 보여주기 힘들 때 어떻게 보여 줄지 지정
키워드설명
hideen영역을 벗어나는 부분 감춤
scroll영역을 벗어나는 부분을 스크롤로 만듦
overflow:hidden;

6. 유동 속성

float 속성

  • 웹 페이지의 레이아웃을 잡을 떄 많이 사용
  • 웹 브라우저의 크기에 상관없이 공지 등을 일정한 위치에 고정할 때 적합
키워드설명
left태그를 왼쪽에 붙임
right태그를 오른쪽에 붙임

이미지와 글이 어우러진 형태로 출력됨

img{
	float:left;
}

7. 그림자와 그레이디언트 속성

글자에 그림자 주기 

text-shadow: 5px 5px 5px black;
box-shadow : 5px 5px 5px black;
[Vue] 6. Mock(가짜) 서버 이용하기 - 2) API 등록 및 서버 데이터 바인딩
[django] C.R.U.D 2 (1) 주인과 강아지

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage