2024.07.24 / 25 수업

목차
반응형
RESULT

etc-image-0

 

HTML
 
<!DOCTYPE html> <!--HTML living standard -->
 
<html> <!-- html 시작태그 -->
    <head> <!--head 시작-->
        <title>Fruits</title<!--웹 페이지의 타이틀 지정 -->
        <link rel="stylesheet" href="./common.css"> <!--문서와 외부 리소스 간의 관계를 정의(스타일 시트연결).-->
    </head> <!--html 종료 태그-->
    <body> <!--body 시작 태그-->
        <div> <!-- div 시작 태그 - 문서의 섹션-->
            <img src="orange.png" > <!--이미지 정의-->
            <h1>orange</h1> <!--h1~h6 제목 정의 태그-->
            <ul> <!--ul 시작태그 - 순서가 없는 리스트-->
                 <!--자식요소로써 리스트 아이템-->
                <li><a href="./orange.html">orange</a></li>       <!--오렌지의 하이퍼링크를 지정-->
                <li><a href="./kiwi.html">kiwi</a></li>                  <!--키위의 하이퍼링크를 지정-->
                <li><a href="./strawberry.html">strawberry</a></li> <!--스트로베리의 하이퍼링크를 지정-->
            </ul> <!--ul 종료 태그 --> 
        </div>  <!--div 종료 태그 -->      
</body> <!--body 종료 태그 --> 
</html> <!--html 종료 태그 -->


 

CSS 
 
   body{
      background-image: url(./orange-bg.png) ;  /*전체 배경의 이미지를 url링크로 지정한다. */

}      
div{ /*div 크기는 부모기준인 body에 의해 측정된다.*/
    background-color: white
    width: auto; /*width에서는 값이 없어도 초기값이 존재한다 = auto. 부모너비 기준 꽉참*/
    height: auto; /*콘텐츠의 높이에맞췆있다. 자식 높이 기준 자동조절 = auto*/
    /*auto는 브라우저가 자동으로 계산해준다.*/
   
    width: fit-content; /*부모요소의 가용범위 내에서 알아서 최대크기로 width를 조정한다.*//
 
    margin: 100px auto;  /*중앙정렬*/
    padding: 40px; /*안쪽여백 40px*/

    /*margin auto auto 는 불가능하다.*/

    padding: 40px;

    border: 10px solid orange/*테두리 모양을 10픽셀에 solid속성, 오랜지테두리로 지정*/
 
    border-radius: 60px 10px 30px 50px; /* 테두리의 굴곡을 상60px 우10px 하30px좌50px 으로 지정*/
}

h1 { /*selector 셀렉터 또는 타입 셀렉터**/
    background-color: white; /**배경 색상 흰색으로 지정 */
    text-align: center; /*텍스트 중앙정렬*/
    color: orange;  
}
 

 

 


explain

 

etc-image-1
HTML 문서를 작성하면서 요한 요소들

HTML



자세한 각 태그 엘리먼트는 https://www.w3schools.com/tags/default.asp 참고한다.
HTML 문서를 작성하면서 가장 중요한 문서의 구조라고 생각한다.

 

● 요소의 부모와 자식 관계

blob
요소의 부모 자식 관계를 따지다보면 증조고조 할머니할아버지 다 나온다.

● 레이아웃 구성

blob
레이아웃을 구성할떄 CSS Style에서 각 레이아웃 마다 테두리를 만들어보자


※여기서 각 div의 기본 속성은 display block (CSS) 이다. 자세한건 CSS 설명참고 

 

● 태그의 속성

blob
src는 소스의 약자


 

CSS


CSS는 HTML로 만들어진 모든 콘텐츠에 레이아웃과 디자인 요소를 정의할 수 있다.

etc-image-5
위 사진이 CSS예시로 잘 표현된 듯 하다. HTML이 철근이라면 CSS는 시멘트,채색,내부가구배치 등(?) 으로 볼수있다.

 

● display:block

dispaly속성이 block으로 지정된 elements 는 전후 줄바꿈이 들어가 다른 elements들을 다음줄로 밀어내고
혼자 차지하는 특징을 가지고있다. 주로 <div>, <p>, <ul>, <li>, <h1>~<h6> 태그 등에 사용한다.

blob
display 속성은 block이 기본적으로 지정되어있다. ↓
etc-image-7
확인해보면 설정하지않은 display가 block속성으로 입력되어있다.

해당 속성을 깨부수기위해 옆에 차례대로 elements를 나열 하고싶으면
inline 속성을 사용하면 되는데 해당내용은 나중에..

 

● margin 

blob

width: 내용(content)의 너비를 설정한다.
heigth: 내용(content)의 높이를 설정한다.
margin:  테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정한다. (바깥여백)
border: 내용(content (1652x5447)과 패딩(padding) 영역을 둘러싸는 테두리의 스타일을 설정한다.
padding:내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정한다. (안쪽여백)

- width (너비), heigth (높이)
  width 속성의 기본 설정값은 auto이며 웹 브라우저가 각 HTML 요소에 맞게 자동으로 높이와 너비를 설정해준다.
  {단위:  %, em, px, cm, mm, inch 등}


- margin(바깥여백), padding (안쪽여백), border(테두리)

blob
ex) margin="10px" → 좌우상하 전부 10px 만큼 바깥여백 생성

 

● 가로 가운데 정렬

etc-image-10etc-image-11
margin: 0 auto; = 중앙정렬 국룰이라고 보면 됨 텍스트까지 중앙정렬하려면 text-align="center"

margin 0 auto는 margin-left:auto 와 rignt:auto와 같다. 양쪽 auto는 가용공간을 여백화한다고 보면된다.

반응형