오늘은 패캠 프론트엔드 개발자 강의에서 설명해준 빈태그, 글자와 상자에 대해 알아보자. empty tag HTML에서 '빈(empty)태그'라는 개념이 있다. 요약하자면 시작태그는 있는데, 종료태그()가 없는 것을 말한다. 위 샘플코드를 보면 열리는 태그와 닫히는 태그가 존재하는 태그들이 있다. (ex) , , ... 그런데 이와는 달리 닫히는 태그가 없는 태그들도 보인다. (ex) ... 이렇게 닫힌 태그가 없는 것들을 빈태그라고 부른다. 이 빈태그를 작성하는 방법은 크게 2가지가 있다. 아래 이미지처럼 시작태그만 쓰거나 슬러쉬(/)를 붙여서 작성하는 방법이다. HTML1~4 버전까지는 뒤에 슬러쉬를 붙이는 문법이 없었는데, HTML4와 5사이에 생긴 XHTML에서는 보다 엄격한 문법을 사용하는 것을 ..

codepen.io 강의에서 소개해준 사이트이다. 간단한 html, css, javascript 코드들을 테스트해보고 싶을 때 좋은 사이트이다. 프론트엔드 개발자들에게는 엄청 유용한 사이트이다. 현재 개인적으로 사이드 프론트엔드 프로젝트를 진행해보려고 하는데, 이 사이트가 엄청 유용하게 쓰일 것 같다. 브라우저 스타일 초기화 이번 패캠 강의에서는 브라우저 스타일 초기화에 대해 배웠다. 각 웹브라우저마다 html을 해석하는 스타일이 다르다. 아래 캡처를 보면 body 태그 안에 단순히 div태그를 생성하고, width/height 속성을 부여해서 네모 박스를 생성한 html 파일을 크롬 브라우저로 열어서 개발자 도구로 확인해보면 body 태그에 내가 설정하지 않은 margin 속성이 8px로 적용돼 있는 ..

이번에는 프론트엔드 개발자가 꼭 알아야 할 정보를 의미하는 태그들에 대해 알아보자. title 태그는 웹브라우저의 tab부분에 출력할 값을 설정할 때 사용된다. 주로 회사명, 서비스명, 슬로건 등을 조합해서 사용한다. 주로 css 파일(문서)을 가져와서 사용할 때 쓰인다. 하지만 css 파일이 아닌 다른 파일을 가져올 경우도 있다. 웹브라우저는 파일의 확장자까지 체크하지 않기 때문에, 가져오려는 파일이 html 파일과 어떤 관계를 가지는지 명시해줘야 한다. 이 때 사용되는 html 속성이 'rel'이다. rel은 'Relationship'단어의 약어이며 가져올 외부문서가 현재의 HTML과 어떤 관계인지를 명시하는 HTML속성(Attribute)이다. rel에 명시된 값을 이용하여 웹브라우저는 해당 파일이..

프론트엔드 개발자라면 반드시 알아야 하는 웹애플리케이션의 화면을 만들 수 있는 HTML 파일에 대해 알아보자. 우선 기본적인 index.html 파일을 만들어보자. 내가 사용하고 있는 텍스트에디터인 VS Code에서 index.html 파일을 생성한 후, ! 를 타이핑한 후 자동완성시키면 아래와 같은 코드가 자동으로 작성된다. VS Code ? 마이크로소프트사에서 개발한 텍스트에디터 프로그램인 'Visual Studio Code' 의 약자이다. 일단 프로그램 차제가 가볍고, 수많은 라이브러리를 지원하고 있어서 현재 프론트엔드 개발자 및 백엔드 개발자를 막론하고 핫한 프로그램 중 하나이다. 한글 언어팩을 설치하면 각종 메뉴도 한글로 나오기 때문에 편하다. HTML(HyperText Markup Langua..

화면을 만들고 꾸밀 때 사용하는 HTML, CSS쪽 지식이 빈약하다보니 스트레스를 받는 일이 잦았다. 과장해서 표현하자면, 백엔드 비즈니스 로직 설계나 구현보다 화면의 버튼 위치 이동, 정렬 맞추기, 화면 수정 작업이 더 부담될 때도 있었다. ㅎㅎ 그리고 개인적인 프론트엔드 프로젝트를 할 때도 화면 만들고 이쁘게 꾸미는게 부담이다. 그래서 패스트캠퍼스의 프론트엔드 개발자 초격차 패키지를 신청하게 됐고, 이 강의를 들으면서 몰랐던 내용이나 부족했던 부분들을 정리해보고자 한다. 나는 이 강의를 통해 HTML, CSS를 이용한 화면 작업에 대해 부담감을 갖지 않는 것을 1차 목표로 하고 있다. 우선 프론트엔드 개발자란 대체 무엇일까? 프론트엔드 개발자? 웹애플리케이션을 만들고 운영하기 위해서는 여러 분야의 사..