목차 사전 준비 Front-end Development Why Vue Vue 2 vs Vue 3 1. 사전 준비 1. VSCode Vetur extension 설치 문법 하이라이팅, 자동완성, 디버깅 기능 제공 2. Chrome Vue devtools extension 설치 및 설정 크롬 브라우저 개발자 도구에서 vue 디버깅 기능 제공 extension 설치 후 확장 프로그램 관리 - 파일 URL에 대한 액세스 허용 2. Front-end Development Back-end 개발은 Django로 진행, 따라서 앞으로 Javascript를 활용한 Front-end 개발에는 Vue.js로 진행한다. Vue.js === JavaScript Front-end Framework Front-end Framewo..

저번 글에서 배웠던 Display와 Position 모두 CSS Layout technique의 종류 중 하나였다! 오늘은 조금은 성격이 다른 float와 flex box를 이용하여 CSS Layout을 다뤄보자. CSS Layout technique 종류 Display Position float Flex box Grid 기타 이전 글들 또는 신문 기사와 같이 이미지를 감싸는 글자들을 많이 보았을 것이다. 또는 이미지가 왼쪽, 오른쪽으로 배치가 되어 있는 것을 보았을 것이다. 이때 사용하는 것이 바로 Float이다. 박스를 왼쪽 혹은 오른쪽으로 이동시켜 텍스트를 포함 인라인요소들이 주변을 wrapping 하도록 함 요소가 Normal flow를 벗어나도록 함 속성 none: 기본 값 left: 요소를 왼..

지난 시간에 네모 박스의 크기 조절 방법을 배웠다면 이번에는 그 박스들의 위치를 지정해줄 것이다. 우선 HTML 시간에 잠깐 지나갔던 인라인/블록 요소라는 것이 기억나는가? 괜찮다. 이번에 다시 배우면 된다. 이전 글과 마찬가지로 CSS원칙 2번째를 알아보고 가자! 모든 요소는 네모이고, 좌측 상단에 배치 Display에 따라 크기와 배치가 달라진다. 여기 나오는 Display의 대표 종류가 block과 inline이다! display: blcok 줄 바꿈이 일어나는 요소 화면 크기 전체의 가로 폭을 차지한다. 블록 레벨 요소 안에 인라인 레벨 요소가 들어갈 수 있음. 대표적인 요소 - div/ ul,ol,li / p / hr / form 등 display: inline 줄 바꿈이 일어나지 않는 행의 일..

지금까지 HTML로 뼈대를 세우고 CSS로 기본 스타일을 지정해주는 방법을 알아봤다. 그럼 과연 우리가 보고 있는 이 웹 페이지들은 어떻게 구성되어 있는 것일까? 그전에 CSS 원칙 하나만 알아보고 가자. 모든 요소는 네모이고, 위에서부터 아래로, 왼쪽에서 오른쪽으로 쌓인다. 여기서 네모가 뭘까? 바로 오늘 우리가 알아볼 Box model을 이르는 말이다. 모든 HTML의 요소는 BOX 형태로 되어있고 하나의 BOX는 네 부분으로 이루어져 있다! 오늘 배울게 얼마나 중요한 것인지 와닿을 것이다. Box model 구성 각각의 영역들의 크기를 따로 설정해 줄 수도 있다! 첫 번째 그림과 같이 top, right 같은 세부 방향을 설정해주지 않고 margin: 10px;라고 선언한다면 상하좌우 모두 같은 값..

내가 원하는 그림, 이미지, 글 등을 집어넣는데 크기가 조절이 안되고 위치를 옮기지 못한다면 어떨까? 굉장히 불편할 것이다! 이런 불편함 들을 해결하기 위하여 이번 글에서는 크기, 색상 등을 손쉽게 바꾸는 방법을 알아보자. 크기 단위 px (픽셀) 모니터 해상도의 한 화소인 '픽셀' 기준 픽셀의 크기는 변하지 않기 때문에 고정적인 단위 % 백분율 단위 가변적인 레이아웃에서 자주 사용 em (바로 위, 부모 요소에 대한) 상속의 영향을 받음 배수 단위, 요소에 지정된 사이즈에 상대적인 사이즈를 가짐 rem (바로 위, 부모 요소에 대한) 상속의 영향을 받지 않음 최상위 요소(html)의 사이즈를 기준으로 배수 단위를 가짐 직접 해보며 비교해보자! 특히 em과 rem의 차이를 잘 알아두면 사용할 때 편하다...

앞에서 잠시 살펴 보았던 선택자에 대해서 알아보자 선택자의 종류에 대해 간단하게 알아보고 뒤에서 상세하게 다뤄보자 1. 기본 선택자 전체 선택자, 요소 선택자 클래스 선택자, 아이디 선택자, 속성 선택자 2. 결합자(Combinators) 자손 결합자, 자식 결합자 일반 형제 결합자, 인접 형제 결합자 3. 의사 클래스/요소 (Pseudo Class) 링크, 동적 의사 클래스 구조적 의사 클래스, 기타 의사 클래스, 의사 엘리먼트, 속성 선택자 vscode에서 쳐보며 어떻게 동작하는지 눈으로 확인해보자! 전체 선택자는 *을 이용하여 HTML의 모든 텍스트에 적용 요소 선택자는 직접 HTML 태그를 선택하여 그 태그에만 적용 아이디(id) 선택자는 #문자로 시작하며, 해당 아이디가 적용된 항목을 선택하여 ..

저번 시간까지 HTML을 이용하여 웹의 뼈대를 구성하는 방법에 대해 배웠다. 이번 시간부터는 표현을 하기위한 CSS에 대해 배워볼 것인데 개인적으로는 글을 읽으며 실습을 하는 것을 추천한다! Cascading Style Sheets = CSS 우리가 자주 사용하는 Naver의 경우 CSS가 없다면 보기가 정말 불편하고 이용하고 싶은 마음이 뚝 떨어진다. CSS를 배우지 않았지만 얼마나 중요한 것인지 알 수 있다. 이처럼 CSS는 스타일을 지정하기 위한 언어이다. 선택자를 통해 스타일을 지정할 HTML 요소를 선택 중괄호 안에서는 속성의 값, 하나의 쌍으로 이루어진 선언을 진행 각 쌍은 선택한 요소의 속성, 속성에 부여할 값을 의미 속성 (Property) : 어떤 스타일 기능을 변경할지 결정 값 (Val..

이번 글에서는 여러 요소들에 대해 배우며, 실습을 통해 직접 HTML의 뼈대를 만들어보자! 우선, HTML의 요소는 크게 인라인 / 블록 요소로 나누게 되는데 CSS에 들어가서 자세한 내용을 배우기 때문에 대충 넘어가자. 인라인 요소 : 글자처럼 취급 블록 요소 : 한 줄 모두를 사용한다. 먼저, 보고 있는 이 문장을 다루는 텍스트 요소에 대해 먼저 알아보자. : href 속성을 활용하여 다른 URL로 연결하는 하이퍼링크 생성 , : 굵은 글씨 요소 -> 중요한 강조하고자 하는 요소 , : 기울임 글씨 요소 -> 중요한 강조하고자 하는 요소 : 텍스트 내에 줄 바꿈 생성 : src 속성을 활용하여 이미지 표현 의미 없는 인라인 컨테이너 위의 리스트와 같이 전체 틀을 다루는 그룹 컨텐츠를 알아보자. : 하..

이번 글에서는 시맨틱 태그라고 불리는 아주 중요한 내용을 다뤄보자! 시맨틱 태그는 HTML 태그가 특정 목적, 역할 및 의미적 가치(semantic value)를 가지는 것이다! ex) 앞의 글에서 보았던 태그는 "이 페이지에서 최상위 제목"인 텍스트를 감싸는 역할(또는 의미)을 나타낸다. Non semantic 요소로는 div, span 등이 있으며, a, form, table 태그들도 시맨틱 태그로 볼 수 있다. HTML5에서는 기존에 단순히 콘텐츠의 구획을 나타내기 위해 사용한 div 태그를 대체하여 사용하기 위해 의미론적 요소를 담은 태그들이 추가되었다 위의 이미지에 나와있는 대표적인 시맨틱 태그 목록을 살펴보자! header : 문서 전체나 섹션의 헤더(머리말 부분) nav : 네비게이션(목록 ..