본문 바로가기

개발자

 (9)
[html, css 기초] 16. 공유 css 및 파일관리 웹페이지를 만들 때 html파일을 여러개 만들어야 하는 경우가 있다. 이때 css 파일도 많이 만들게 되는데 그럼 css 코드도 페이지 마다 겹치는 부분이 많다. 이때 공유 css ( 겹치는 코드 공유해놓은 css )파일을 만들어서 관리하면 관리하기 훨씬 용이하다. ( 실습 생략 ) 알아둘 점 # 공유 css 파일을 다른 css파일 보다 먼저 link로 연결해야한다. ( 코드상으로 맨 위 ) 왜냐면 여러 css를 참조하는 경우 파일의 순서가 영향을 미치기 때문이다. # 두번째 css 파일 부터 차례대로 상충하는 부분은 덮어씌기가 된다. # styles 파일을 만들어 css 파일을 모아두고 images 파일을 만들어 images 파일을 별도로 관리하자! # 하지만 중간에 교체할 경우 경로를 모두 수정해야 ..
[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 ..

티스토리툴바