본문 바로가기

웹개발/HTML, CSS 기초

 (16)
[html, css 기초] 8. css - style 지금 까지 작성한 코드를 보자. 여기에는 한 가지 불편함이 있다. 바로 html 속성에서 style 부분이 모두 동일함에도 불구하고 생략하지 않고 모두 써준 것 이다. 그렇다면 이것을 생략하는 방법이 있을까? 당연히 있다!!! html 요소( h1, p.... ) 단위의 스타일을 디폴트로 세팅해주는 css코드가 존재한다. 이는 웹 브라우저에 실질적으로 표시되는 것은 아니지만 스타일을 지정해 주므로 meta information( 메타 정보 ) 라고 부른다. 실습 # style을 각각 다음과 같은 형식으로 지정해 준 뒤 # 태그에서 style을 생략한다.
[html, css 기초] 7. 링크 만드는 방법 링크란? 웹페이지를 사용할 때 텍스트 또는 버튼, 이미지를 통해 다른 웹페이지를 open한 경우가 있을 것이다. 이 방법을 링크로 구현할 수 있다. html 태그 a( 앵커 요소 )를 이용하면 텍스트에 링크를 추가할 수 있다. 실습 # 태그를 이용한다. 실행 결과 # 결과를 보니 바뀐게 없다. 왜일까? # 어떤 웹페이지를 open할 것인지 브라우저에게 알려주는 명령이 없기 때문이다. # 이 명령은 html속성인 href( hyperlink refference )을 이용하여 링크를 지정해 주면 된다. 실행 결과 클릭 후
[html, css 기초] 6. 코드 포멧 하는 방법 1. 설정 - keyboard Shortcuts - format document를 입력한다. 2. keybinding 부분에 단축키를 설정한다. 3. view - extensions 에서 prettier을 검색한 뒤 설치한다. 4. 설정 - settings 에 들어가서 format을 검색한 뒤 다운 받은 것으로 변경한다.
[html, css 기초] 5. css 스타일링 지난번 퀴즈 답 css 참고서에 들어가서 color를 검색하니 "color"라는 속성을 발견하였고 클릭하여 보니 글씨의 현재 color값을 설정한다고 해서 이를 "red"로 바꾸었다. https://developer.mozilla.org/ko/docs/Web/CSS/Reference CSS 참고서 - CSS: Cascading Style Sheets | MDN CSS 참고서를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, CSS 자료형과 @규칙을 찾아보세요. 또한 유형별로 정리한 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다. developer.mozilla.org [결과] 1. 이론 색상을 표현하는 방법에 대해 학습하였지만 색상은 매우 다양하고 많기 때문에 일..
[html, css 기초] 4. html 속성과 css 1. 이론 이전 강의에서 html을 기본적으로 다루는 방법을 배웠다. 이제 html 속성에 css 코드를 추가하여 색상, 위치, 굵기, 스타일 등을 변경할 수 있다. 실습을 보면 css가 뭔지 직관적으로 알 수 있다. 2. 실습 [css 적용 전 기본값] [css 코드 작성] : 제목을 가운데로 옮기는 코드이다. # css 코드란? style="~" 부분을 의미 ( html 속성 ) # open tag에만 작성할 수 있음을 주의한다. [css 코드 적용 후] 퀴즈) 색상을 옮기는 css 코드를 작성해본다. # mdn web docs에서 css reference를 보고 색상을 바꿀 수 있는 것을 찾아 글 색상을 변경한다. 정답은 다음 글에서 확인할 수 있습니다.
[html, css 기초] 3. html 요소 1. 이론 html element ( 요소 )란? ● h는 제목 짓고 싶을 때 사용한다. ● Hello World 전체를 html element라고 한다. ● 는 open tag, 는 closing tag라고 부르며 브라우저가 태그의 시작과 끝 지점을 알 수 있도록 closing tag 에는 "/"가 포함 되어 있다. ● h1을 element name이라고 부른다. ● "Hello World" 부분을 element content라고 부른다. ● h는 html element의 일부 일 뿐 이미지, 부제목, 내용 등을 모두 포괄한다. ● 엄밀하게는 태그 없어도 눈에 보일 수 있지만 주석을 달고 더 많은 의미를 브라우저에게 제공한다. ● 는 단락을 만들고 싶을 때 주로 사용 [예시] [결과]
[html, css 기초] 2. 개발 환경 구축하기 1. 이론 앞선 강의에서 텍스트파일을 통해 코드를 구현 해 보았다. 하지만 프로젝트를 진행할 경우 텍스트 파일만을 이용하여 코드를 구현하는 것은 매우 불편하고 시간이 많이 소요 되기 때문에 우리는 무료로 배포되어 있는 vscode ( visual studio code )라는 편집기를 통해 보다 쉽게 코드를 구현할 수 있다. 2. 실습 # vscode 설치 과정은 생략 ( 구글 - vscode 설치방법 검색 ) # 바로 vscode를 실행한 뒤 Start - Open Folder를 클릭하여 이전 강의에 생성한 index.html을 open한다. # File - open Folder를 클릭하면 왼쪽 창으로 폴더를 관리할 수 있다. # 테마는 설정( 톱니바퀴 ) 모양을 클릭한 뒤 Themes -> Color ..
[html, css 기초] 1. html 페이지 만드는 방법 1. 이론 웹사이트는 우리가 지시한 명령( code )과 명령을 읽어서 수행하는 역할을 하는 브라우저( Browser )로 구성되어 있다. 이때 우리가 명령을 어떻게 지시할까? 이게 바로 html이다! html에 코드를 작성하여 브라우저로 로드하게 되면 브라우저가 html을 읽고 실행한다. 2. 실습 # 바탕화면에 새로운 폴더를 만든다. (폴더명은 자유롭게) # 텍스트 파일을 하나 생성한다. # 이름을 아무거나 짓고 뒤에 .html을 붙여 파일명을 변경한다. # 유형에 해당하는 항목이 다음과 같이 바뀌었는지 확인한다. ( 안바뀌었다면 아래 참고 ) # 안바뀐 경우 보기 -> 표시 -> 파일 확장명 체크 # 해당 파일을 메모장으로 열어준다. # 다음과 같은 코드를 작성한 뒤 ctrl + s 로 저장한 뒤 ..

티스토리툴바