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

13623 단어 TILCSShtmlCSS

오늘 배운내용
📍 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가지 특징
    • 줄바꿈현상, 가로세로 설정, 상하배치 작업 가능 여부
BlockInline
y축 정렬x축 정렬
공간 존재공간 X
width,heihgt 적용 가능width, height 불가능
h,p,diva, span

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{} 혹은 *{} 으로 공백제거 (실무에선 * 을 많이 사용한다.)
1613번: 역사 - Swift
2022-04-05 웹 공통과제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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