40일차_CSS_float_clear / both_CSS 파일 연결

21.05.07

 CSS 

@float 

  =>  Float 이란 옵션??은 내가 원하는 방향에 요소를 띄운다.

  - 위 사진은  float 에 right 옵션을 준것.

ㅁㄴㅇ

ㅁㄴㅇ

@clear / both

  -  clear : float 속성의 영향을 받지 않도록 설정하는 속성

  -  both : float 속성의 left와 right의 영향을 받지 않는 값

  - 위는 float과 clear 속성을 활용한 예제이다.

  - 위는 1번과 2번에는 float의 left 속성을 주었고, 3번 div에는 clear 속성을 준 결과이다.

만일 3번에 clear속성을 주지 않으면 아래와 같은 결과를 볼 수 있다.

 3번 div는 분명 화면 안에 있다. 단지, 1번과 2번에 가려져 보이지 않는것 뿐이다.

@VS Code ( 자동완성 ) - Tag 연산 

위는 VS Code에서 코드 작성간에 태그를 여러개 생성할 수 있다.

  - 보면  id 가 "layout"인  div  태그 안에 <div> 태그를 6개 만들었다.

@CSS파일 생성 및 적용 

CSS 파일 생성 및 적용

  - 좌측이 작성한 HTML 파일이며, 우측이 원래는 <style> 태그 안에 있어야할 CSS 코드이다.

  - 보는것과 같이  style.css  라는 파일을 만들어 작성하였으며, <link>라는 태그를 이용해 연결해주었다.

  - 다른 태그들을 사용하면서 경로 지정할 때 사용했던 "href"라는 옵션으로 연결할 CSS 파일을 지정해주었다.