[CSS] 2022-03-22 2일차 개발일지(2)

6668 단어 CSS웹기초대구AI스쿨CSS

1. 학습한 내용

box model

각각의 태그 부피감 결정
(중요도 순 : 선택자 -> box model ... )

Q. h1태그는 줄바꿈이 되지만 링크는 자동 줄바꿈이 없는가?

확인하려면 h1태그에 테두리를 줘서 확인할 예정

테두리 = border (두께, 선, 색)

<html>
    <head>
        <style>
            h1{
                border: 10px solid red;
            }
            a{
                border: 10px solid red;
            }
        </style>
    </head>
<body>
   <h1>WEB</h1>
   <h1>WEB</h1>
   Lorem ipsum dolor sit<a href="http://w3c.org">amet</a> ....등등


A.
h1 태그는 화면 전체를 사용,
-> h1 = block level element
a 태그는 컨텐츠 크기만큼 사용
-> a, img = inline element

선언이 똑같은 경우 

<style>
	h1, a {
    		border: 10px solid red;
        }
</style>


각각의 태그는 기본 디자인이 존재, 하지만 css로 변경(=제어)은 가능

display : 가장 큰 틀의 규범을 결정하는 속성

예. inline, block, none, grid

Q. 텍스트와 테두리 사이 여백
간격 = padding

  <style>
            h1{
                border: 10px solid red;
                padding: 30px;
            }
  </style>

<style>
            h1{
                border: 10px solid red;
                padding: 30px;
                margin: 50px;
            }
 </style>

2. 어려웠던 점


위 50px 아래 50px 경우 중간에 100px 만큼 떨어져야 하는데
중간 공백이 100px 만큼 안 보이는 이유는 (수직인 경우) 마진 값이 겹쳐지는 현상으로 50 만큼 떨어진다.

3. 해결방법

4. 학습소감

220322_웹기초_css1 인강 1:42:32

[JAVA] 상속이란?
지도이야기 | Geo 함수 - 교차구역 구하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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