[HTML & CSS] Flex(4) / vscode 세팅

[flex-direction: column과 flex-grow: 1; 적용하기]

• flex-direction이 column일 때, flex-item들의 세로 크기를 지정해주는 속성이 2가지 있다.
• height를 이용하거나 flex-grow를 이용하여 높이를 지정한다.
• flex-container에 남는공간이 100%라면 height: 100%와 flex-flow: 1은 같은 역할을 수행한다.
• height: 100%는 flex-container의 높이를 100% 가진 상태로 끼어있는 상태를 의미한다.
• flex-grow: 1은 flex-container의 남는 공간에 비율계산 후 알맞게 들어간 상태를 의미한다.
• 나중에 코드를 작성할 때, 두 속성의 의미는 비슷하지만 상황에 맞춰 필요한 코드를 작성하는 것이 좋다.

See the Pen flex-direction: column; flex-grow:1; 적용하기 by psm817 (@psm817) on CodePen.

 

 

[vscode 설치 및 기본 설명]

1. vscode 설치

• 구글에 vscode 검색 후 설치
• 설치 exe 파일 실행 후 체크박스의 항목 모두 체크하고 설치 진행

 

2. 기본 설정

1)  한국어 플러그인 설치

• vscode 실행 후 좌측상단 메뉴에서 가장 아래 아이콘 선택
• 검색 창에 korean language pack를 입력 후 플러그인 설치

 

2) 기본 세팅

• 파일 -> 기본설정 -> 설정으로 진입
• 폰트 사이즈는 16~18정도가 가장 무난, 탭 사이즈는 2가 가장 무난한 기본 세팅
• 테마는 클래스와 태그의 색상을 구분하고, 구분자끼리 색상을 다르게 표시해주는 '모노키 흐릿한' 테마를 선택하고 시작하는게 편리하다.

 

3) 파일 열기

• 파일 탐색기에서 확장자가 있는 파일과 확장자가 없는 폴더 구분
• vscode는 최초에 폴더를 통해 작성된 코드를 오픈 가능
• 폴더 안에 새 파일을 만들 때, 새로 만들기를 통해 텍스트 파일을 생성하고 확장자명을 txt가 아닌 html이나 css로 바꿔주면 우리가 사용하고자 하는 html파일이나 css파일이 된다.

 

3. html, css 기본 세팅

• html 파일에서 !를 입력하고 tab를 누르면 기본 html 구조가 자동으로 작성된다.
• vscode에서는 html과 css를 직접 연결을 시켜줘야 한다.
• 연결하는 방법은 head 태그 안에서 link를 입력하고 tab를 누르면 기본 링크 구조가 자동으로 작성된다.
• link 태그 안에 href에 해당 html과 연결되는 css 파일명을 입력한다.