HTML & CSS 기초문법(2)-마진병합, float

부지런한 배짱이🤟·2022년 4월 5일

CSS html

공부기록

목록 보기

9/23

오늘 배운내용
📍 inline의 left,right 공백속성은 적용가능하다
📍 마진 병합 (부모,형제), 태그별 사용법

웹 제작시 고려사항
- 웹 표준 : 규격, 공식표준
- 웹 접근성 : 누구나 접근 가능하도록
- 크로스 브라우징 (모든 브라우저와 기기)

1️⃣ HTML 기초문법

1. 태그 구성요소

<열린태그 속성="속성값">컨텐츠 </닫힌태그>

태그명 : 고유의 기능, 열린태그/닫힌태그
컨텐츠 : 열린태그와 닫힌 태그 사이에 있는 내용물
속성: html태그가 갖고있는 추가 정보
속성값: 어떤 역할을 수행할지 구체적인 명령을 진행

2. HTML 문서구조 (+구조 태그)

<!DOCTYPE html> 		<!-- HTML5 문서임을 선언 -->
<html> 					<!-- HTML 문서 시작-->
	<head>
    	<meta charset=”UTF-8”>				<!-- 문자코드 인코딩 -->
  		<title></title>						<!-- 웹사이트 제목(탭) -->	
    </head>	
 	<body>
      	<!-- 상단 영역 -->
      	<header>
          <h1></h1>        				<!-- 로고 혹은 사이트제목 -->
          <nav>							<!-- 메뉴버튼 담는 공간 -->
            <ul>
              <li><a>홈</a></li>			<!-- ul>li>a 와 주로 사용 -->
              <li><a>메뉴</a></li>
              <li><a>메뉴</a></li>
            </ul>
          </nav>
        </header>
      
      <!-- 본문내용 영역 -->
      	<main role="main">      
          <article>					<!-- 태그내에 구역을 대표하는 h존재해야함 -->
            <h4>구역 대표 타이틀</h4>
          </article>
          <article>					<!-- 태그내에 구역을 대표하는 h존재해야함 -->
            <h4>구역 대표 타이틀</h4>
          </article>
      	</main>
      
      <!-- 하단 영역 -->
      	<footer>
          <div></div>    
      	</footer>
    </body>
</html>

목차 : 내비게이션
- header 태그
  - nav 태그 : 메뉴버튼을 담는 공간(navigation)
    - ul, li, a 와 함께 사용
본문 : 웹사이트 내용본문
- main, article 태그
  - main : role=”main” 반드시 필수적으료 표시해줘야한다! (익스플로어 지원X때문)
    - article : 정보를 담고 구역을 설정, 태그내에 구역을 대표하는 타이틀 h 태그 존재
      - 무조건 1개 이상은 존재한다 (검색엔진관련..)
부록 : footer,정보
- footer 태그 : 가장 하단에 들어가는 정보 표기

3. Block vs Inline

두요소를 구분 짓는 3가지 특징
- 줄바꿈현상, 가로세로 설정, 상하배치 작업 가능 여부

Block	Inline
y축 정렬	x축 정렬
공간 존재	공간 X
width,heihgt 적용 가능	width, height 불가능
`h`,`p`,`div`	`a`, `span`

구글링하다 잘 정리된 block, inline 태그별로 구분해놓으신 블로그 발견..!
- 출처 : https://calmdawnstudio.tistory.com/51

2️⃣ CSS 기초 문법 및 속성

디자인, 레이아웃, 스타일 정의 (html을 꾸며주는 역할)

1. CSS 구성요소

선택자 { 속성 : 속성값; }

선택자 : 디자인을 적용할 html 영역
속성: 어떤 디자인을 적용할지 정의
- 속성값: 어떤역할을 수행할지 구체적 명령, 세미콜론(;) 필수 입력
css 적용법 3가지 : inline , internal, external(가독성,유지보수 유리) Style Sheet

2. CSS 주요 속성

width, height, border-.., font-..(family 사용시 마지막 디폴트 snas-serif),text-..(align,decration,,) background..
- background : yellow url(경로) no-repeat left;
- border : solid 1px black

3. CSS 선택자

우선순위 : style속성 > ID > Class > Type

Type, 태그
Class, 태그 별명 : . 사용해서 작성
ID , 태그 이름 : # 사용해서 작성

4. 부모태그 상속

부모 태그의 모든 CSS 속성이 자식 태그에게 상속되는 것은 아니다.
추후 자식에게 상속되는 css 속성 정리가 필요!

5. 캐스케이딩 (적용 우선순위)

1. 순서 : 나중에 적용한 속성값이 우선순위가 높다.
1. 디테일 : 더 구체적으로 선택자를 작성할 경우 우선순위가 높다.
1. 선택자 : style속성 > ID > Class > Type

6. Margin, 마진병합현상

박스모델 : margin > border > padding > content
Block요소와 Inline요소
- Inline 요소
  - margin-top/margin-bottom/padding-top/padding-bottom 값 적용 불가능
    - left/right 값은 적용가능하다..!
⭐️ 마진 병합 현상 : 모두 block 일때 발생
- 형제지간 마진 병합 (위아래로 박스가 있을경우)
  - margin-bottom 과 margin-top 중 숫자가 큰값으로 적용
- 부모자식지간 마진 병합
  - 자식의 margin은 부모에도 영향 (함께 margin 값만큼 이동된다.)
  - 부모-자식 요소가 block이고, 부모자식간 분리하는 height , min-height, max-height, border, padding, inline 이 없을 때

3️⃣ CSS 레이아웃 속성 (display)

display : block, inline, inline-block
float
- 말그대로 띄운것이기 때문에 다음 요소가 겹치는 현상 일어난다!
- left, right : 왼쪽 혹은 오른쪽 정렬
- 클래스에 left, right를 줘서 .left, .right 선택자를 통해 레이어층을 만드는 것
- 레이어가 겹쳐지지 않는 상태로 왼쪽 정렬시키고 싶다면
  - float:left; 를 연속적으로 입력
  - float:right; 도 마찬가지로...
clear
- float 가 적용된 바로 다음 요소에 작성!
- float과 항상같이 다닌다고 생각..
- float 에 대한 속성을 제어하고자 할때
- 레이어 층이 겹쳐지기 때문에 제어해야함
브라우저와 공간 사이의 공백 제거
- * : 모든 태그 선택
  - margin,padding 값 0으로 세팅
- html, body{} 혹은 *{} 으로 공백제거 (실무에선 * 을 많이 사용한다.)