본문 바로가기

프론트엔드

 (54)
CSS 06_display display 속성의 기본 4가지 값 display 속성은 HTML 요소를 어떻게 표시할지 결정한다. none : 요소를 보이지 않게 설정한다 visiblity : hidden => 영역은 차지하지만 스타일이 보이지 않음 display : none => 영역도 차지하지 않음 block : 가로 영역을 모두 채우며 block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보임 width, height 속성을 지정할 수 있음 div , p , heading (h1~h6) 태그 등이 이에 해당됨 inline : 컨텐츠만큼의 영역만을 차지하며 block과 달리 줄바꿈이 되지 않음 width, height 속성을 지정할 수 없음 inline-block : block과 inline의 중간 형태로 요소는 inlin..
CSS 05_BoxModel [ Box Model 이란? ] 모든 HTML 요소는 웹 페이지에서 일정 공간을 차지하는데 이러한 공간을 CSS에서는 box model로 정의하고 있다. Box Model 은 Content, Padding, Border, Margin으로 구성되어 있다. [ Content ] Content : 텍스트나 이미지가 들어있는 Html 요소의 실질적인 내용을 뜻한다. width나 height로 content의 너비를 지정할 수 있고 이 때 단위는 px, %, vw, vh 등이 올 수 있다. width: 200px; height: 200px; ★ 주의할 점 : div (block level element)와 달리, span과 같은 inline level element는 width와 height가 적용되지 않는다. ..
CSS 04_table [기본적인 table 관련 태그] : 표를 만드는 태그로, 표 전체를 감싸는 데 사용한다. : 표의 제목이나 설명을 작성하는 태그 : 표의 행을 의미하는 태그. 자식 태그로 태그나 태그가 반드시 있어야 한다. : 표의 제목 열을 의미하는 태그. 부모 태그인 태그 안에 있어야 한다. (글씨체가 진해짐) : 표의 일반 열을 의미하는 태그. 부모인 태그안에 있어야 한다. : 표의 제목 열들을 묶는 그룹 태그 : 표의 일반적인 데이터들을 묶는 그룹태그. 기본적으로 행그룹태그를 사용하지 않으면 크롬브라우저가 자동으로 tbody 태그로 묶어준다. : 표의 하단 영역을 묶는 그룹태그 => , , 태그는 style을 적용할 때 편리하게 사용하기 위해 쓰는 듯 하다..? [table에 style 적용하기] table {..
CSS 03_font [기본적인 글꼴 관련 속성] font-family : 글꼴 종류를 지정한다. 기본값은 웹브라우저 기본 글꼴 ex) font-family : 'Noto Serif KR', serif; #Noto Serif KR 글꼴로 바꾸되, 만약 브라우저에 없는 글꼴이라면 serif 글꼴을 적용한다. : 사용자의 컴퓨터에 설치된 폰트와 상관없이 온라인의 특정 서버에 위치한 폰트파일을 다운로드하여 화면에 보여주는 폰트를 웹 폰트라고 한다. Google Fonts 사이트에 방문하여 또는 @import 문을 사용하여 웹 폰트를 적용할 수 있다. font-size : 글자 크기를 지정한다. font-style : 글자를 이탤릭체로 표시할지 지정한다. font-weight : 글자 굵기를 지정한다. font-variant : 소..
HTML 02 _ HTML의 구조 [HTML이란 무엇인가?] - html은 hyper text markup language 로, 태그로 이루어진 마크업 언어라고 생각하면 된다. - vscode에서 새 창을 만들고 '!' + 'tab' or 'enter' 을 누르면 기본적인 코드들은 자동으로 작성이 된다. - 와 태그가 보일텐데, 태그는 웹 브라우저에 표시되지 않는 태그이고 태그는 실제로 웹 브라우저에 표시되는 태그이다. - 내가 작성한 웹 브라우저는 파일 우클릭 -> open with live server 으로 창을 열 수 있다. - 태그 안에 태그를 설정하고 태그의 contents를 작성하면 그 contents는 새로 생성한 웹 브라우저의 이름이 된다. ex) hello - 실제로 웹 페이지 상에 표시되는 내용들은 태그에 작성한다. [..
HTML 01 _ 웹 개발의 기초 [웹 개발의 기초] HTML은 자동차의 툴, CSS는 자동차의 외관, Java Script는 자동차를 움직이는 동력이라고 생각하면 된다. HTML과 CSS는 visual studio code를 설치해 실행할 수 있다. vscode를 설치했다면 앞으로 html css 코드를 짤 때, 좀 더 편리하게 짤 수 있도록 하는 확장 프로그램을 설치하는 것이 좋다. vscode 맨 왼쪽 탭에서 블록처럼 보이는 5번째 '확장' 아이콘을 선택하면 위와 같이 검색 탭이 뜬다. 아래의 확장 프로그램을 하나씩 검색해서 설치해주면 끝이다. [vs code의 확장 프로그램] Korean language pack : 한국어로 볼 수 있게 해주는 패키지 bracket pair colorize : 여러 개의 괄호가 겹쳐있을 때 색을 ..

티스토리툴바