Flex~~~돈콜미

10850 단어 CSSFlexboxCSS

css에서 flexbox에 대해서 알아보자

(이런거 뭐가 중요하겠어.... 비트코인 따따따따상하고 있는데)

HTML에서 요소들의 배치를 편리하게 할 수 있엄 !!

display: flex;

우리 웹페이지는

구성이 잘 되어 있어 ~~ 눈치챔?

이렇게 웹화면서 구성을 짜는거야

이렇게 화면 나눈는 방법 정말 다양한데

그 중에 플렉스박스 라는걸 알려줄께~~ ㅇㅋ 레츠고

그럼 오늘의 목표를 공개 할께~

1번
영역나누기 HTML

스타일을 나누지 않으면 그냥 글로 보인다 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main2.css">
    <title>연습모드</title>
</head>
<body>
  <div id="container">
    <div class="col w10">
      <div class="icon">아이콘1</div>
      <div class="icon">아이콘2</div>
      <div class="icon">아이콘3</div>
    </div>     
    <div class="col w20">
      <div class="row h40">영역1</div>
      <div class="rowh40">영역2</div>
      <div class="row h20">영역3</div>
    </div>
    <div class="col W70">
      <div class="row h80">영역4</div>
      <div class="row h20">영역5</div>
    </div>
  </div>

    
</body>
</html>

스타일을 바로 HTML에서 줘도 되지만
너무 복잡하기 때문에

CSS라는 파일에 한곳에서 관리를 한다.

그 관리를 위해 셀렉터라고 하는걸 사용한다.

크게 두가지가 있다.
1)#id
2).class

id는 딱봐도 뭔가
고유해 보이지 않는가?
그렇다. 진짜 겹치지 않는 태그를 아이디로 묶어주는게 좋다.

class는 뭔가 ㅋㅋㅋㅋ겹쳐도 될거 같은?

그리고 네이밍이 중요하다.

2번

영역을 새로 나누기
가로로 나누기

자료형과 연산자
[Vue.js] Vue CLI

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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