2. Front-end/2-1. HTML

HTML - [ BEM ]

BEM (Block Element Modifier) - HTML 클래스 속성의 작명법을 의미 1. 요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시 (언더바 2개) 2. 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시

HTML - [ 오픈 그래프 / Favicon]

1. 오픈 그래프 오픈그래프란 웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 의미한다. 대표적으로 카톡에 웹 사이트의 주소를 전송하면 아래에 웹 페이지가 카드 형식으로 나타나는 것을 의미한다. 아래와 같이 코드 작성하면됨! property에 작성한 og란 오픈 그래퍼의 약어이고, 타입, 사이트 이름, 타이틀, 설명, 이미지, 사이트 주소 등을 명시할 수 있다. og:type = 페이지의 유형(E.g, website, video.movie) og:site_name = 속한 사이트의 이름 og:title = 페이지의 이름(제목) og:description = 페이지의 간단한 설명 og:image = 페이지의 대표 이미지 주소(URL) og:url = 페이지 주소(URL) 트위터..

HTML - [ 핵심 요소(태그) / 전역 속성 ]

1. 핵심요소 HTML에서 자주 사용하는 핵심 요소들을 알아보자. : 블록 요소. 특별한 의미가 없는 구분을 위한 요소 ~ : 블록 요소. 제목을 의미하는 요소. 숫자가 작을수록 더 중요한 제목을 정의. : 블록 요소. 문장을 의미하는 요소. : 블록 요소. 순서가 필요없는 목록의 집합을 의미. (Unordered List) : 블록 요소. 목록(list) 내 각 항목(item) : 인라인 요소. 이미지를 삽입하는 요소. : 인라인 요소. 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. : 인라인 요소. 특별한 의미가 없는 구분을 위한 요소. : 인라인 요소. 줄바꿈 요소. : 인라인 요소&블록 요소. 사용자가 데이터를 입력하는 요소. 왼쪽에서 오른쪽으로 수평으로 쌓이는 특징을 가지고 있지만 가..

HTML

html 파일에서 ! 입력 후 엔터키를 누르면 자동으로 생성되는 각 태그의 역할에 대해 알아보자. DOCTYPE(=DTD) : 문서의 HTML 버전을 지정해주는 코드이다. 은 가장 최신인 HTML5을 의미한다. html 태그 : 문서의 범위를 브라우저에게 알려주는 역할 head 태그 : 문서의 정보를 나타내는 범위로, 웹페이지의 보이지 않는 정보를 작성하는 범위 body 태그 : 문서의 구조를 나타내는 범위로, 웹페이지의 보여지는 구조를 작성하는 범위 TITLE 태그 : HTML 문서의 제목을 탭에 표시한다. meta : HTML 문서의 제작자, 내용, 키워드 같은 나머지 여러 정보를 검색엔진이나 브라우저에게 제공한다. charset은 문자 인코딩 방식을, name은 정보의 종류, content는 정보의..

VS Code 사용

html파일에서 '!' 입력 후 탭 키, 혹은 엔터를 누르면 일일이 입력할 필요 없이 사진처럼 자동으로 html 구조가 완성된다. 코드 입력창 좌측을 보면 프로젝트(=폴더)와 파일내역이 뜨는 곳이 사이드 바, 가장 왼쪽의 큼지막한 아이콘이 있는 곳이 액티비티 바 이다. 확장팩 설치 한국어로 설정을 변경하고 싶을 때는 액티비티 바의 가장 아래에 있는 Extensions 메뉴에서 korean을 검색 후 설치하면 된다. (만약 다시 설정을 변경하고 싶을 때는 Command Palette(명령창) 실행 후 CDL를 검색해서 원하는 언어를 선택하면 된다. ) 한국어를 설치했을 때 처럼 확장(Extensions) 메뉴에서 'beautify'를 검색 후 설치하면 쉽게 정리된 코드를 만들 수 있다. 명령창에서 Keyb..