/ LECTURE

CSS - Display / Position

이 페이지는 다음에 대한 공부 기록입니다

JAVA(자바), Python(파이썬) 기반의

AI 활용 응용 소프트웨어 개발자 양성 과정

2021.11.10. ~ 2022.05.18.

찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

33일차 수업

========복습========

CSS 박스모델

Content : 실질적 내용 부분

Padding : 테두리와 내용 사이에 있는 공간

Border : 패딩과 내용을 담고 있는 선

Margin : 테두리 밖부터 다른 요소까지의 공간

Width, height : 인라인과 블록 태그의 크기를 정하는 옵션

======== 끝 ========

33일차 수업

display

블록 태그 : 언제나 새로운 라인에서 시작, 모든 라인을 너비로 차지

인라인 태그 : 현재 라인에서 시작, 너비 내용만큼의 너비 차지

모든 태그에는 display 옵션의 속성이 정해져 있습니다 > 속성 값이 있다

display 속성값을 바꾼다면 블록을 인라인으로, 혹은 인라인을 블록으로

  • 인라인 태그의 display를 블록으로 바꾼다 하더라도 다른 요소를 포함할 수는 없음

inline-block : 라인을 차지하는 행동은 inline처럼, 크기 마진 등은 블록 요소처럼 사용 가능

<style>
  div{
  	display:inline;	/* 너비와 높이는 내용에 맞춰서 설정 되기 때문에 크기가 설정이 안됨 */
  	display:inline-block;	/* block처럼 너비와 높이가 가능하고, inline처럼 가로 정렬이 가능 */
  	display:none;	/* 태그를 숨기는 속성 레이아웃 상에도 영향 없음*/
  	visibility:hidden;	/* 태그를 숨기는 속성, 레이아웃 상에는 존재 */
</style>

position

위치를 선정하는 속성

static : 웹페이지의 흐름대로 요소들이 위치하는 방식, 기본값

relative : 정적 위치를 대상으로 위치를 재설정하는 방식

fixed : 위치를 항상 같은 곳에 위치하는 방식

absolute : 상위 태그의 위치에 따라 고정 위치를 설정, 없다면 <body> 태그를 기준으로 설정

<style>
  div{
  	position: absolute; /* relative의 기준이 되는 태그 명시*/
  }
  div{
  	position : relative;
  	top : 50px;
  	/* 배치하려는 위치에 대한 재정의 좌표를 적어줘야함 */
  	position : fixed
  	bottom: 20px;
  	/* 배치하려는 위치에 대한 재정의 좌표를 적어줘야함 */
  }
</style>

float : 요소가 잘 어울리게 만들어주는 기능, 레이아웃 작성할 때 자주 사용

overflow : 요소가 밖으로 흘러넘칠 때 자동으로 요소를 감쌀 수 있도록 도와주는 속성

<style>
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  p {
    clear: both; /* float가 영향이 없도록 해제 */
    overflow: auto;
  }
</style>