본문 바로가기

전체 글77

CSS - 5. font style 1. font family font-family는 폰트 스타일을 지정하는 속성이다. #title { font-family: Georgia, "Times New Roman", Times, serif; } Georgia, "Times New Roman", Times, serif 라는건, 브라우저가 Georgia라는 폰트를 지원해주면 Georgia폰트로 적용하겠다는 뜻이다. 만약 Georgia 폰트가 지원되지 않으면, "Times new Roman"을, 이것도 없으면 Times, 그리고 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻이다. "Times new Roman"에만 ""(쌍따옴표)로 감싸져 있는 건, 폰트 이름에 띄어쓰기가 되어있으면 ""를 사용해야 한다. font-family.. 2020. 6. 12.
CSS - 4. Introduction to CSS 1. CSS(Cascading Style Sheets) HTML만으로도 사이트를 만들 수 있지만, 화려한 웹사이트를 만들려면 HTML과 CSS가 필요하다. CSS란 HTML 태그들에 디자인을 입혀주는 것이다. HTML이 헤더, 문단, 테이블 등으로 정보를 조직화하는 구조를 제공한다면, CSS는 HTML이 아름다워 보이도록 스타일을 입히는 것이다. 2. CSS 적용 css를 작성한 후 html에 적용되도록 반영하는 방법은 3가지가 있다. 인라인 스타일 : 태그 style 속성에 직접 작성할 수 있다. (예. Hello ) 이 방법은 빠르고 편리하다. 하지만, h1태그에 글씨 색상뿐만 아니라, 적용해야 할 스타일이 10개가 넘어간다면 코드 가독성이 떨어진다는 단점이 있다. 또한 html 태그와 style 코.. 2020. 6. 12.
HTML - 3. HTML Attributes attribute는 종류가 많고, 어떤 tag인지에 따라 적용할 수 있는 attribute도 달라진다. 1. id id는 각 태그에 이름을 주는 속성이다. 즉, 주민등록번호와 같이 한국에 단 하나밖에 없는 고유한 값이라 이해하면 된다. 웹 페이지에 해당 id 이름은 class처럼 중복되지 않고 오직 하나만 가질 수 있다. (예. div id = "hi">) 이와 같이 hi이라는 id를 가진 태그는 단 하나만 있을 수 있다. 다른 태그에 hi라는 id는 더 이상 사용할 수 없다. 그래서 id는 해당 요소에만 넣고 싶은 디자인을 적용할 때 주로 사용한다. 2. class class도 태그에 이름을 주는 속성이다. id와 비슷한 역할이지만, class는 여러 태그에 중복된 이름을 부여할 수 있다. (예. , .. 2020. 6. 12.
HTML - 2. HTML의 구조 1. HTML tags HTML 파일의 구조는 항상 아래와 같다. 여기서 는 HTML 파일에 제일 첫 줄에 위치해야 하는 선언문이다. 은 html 파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할을 한다. ⚠️ 현재 사용하고 있는 버전은 html5이다. html elements(요소)들은 으로 감싸져 있는데, 브라우저가 html태그를 만나면, html을 시작됐는지 인지하고 요소를 그릴 준비를 한다. html태그 다음에 항상 head태그가 위치한다. 태그 안에는 사이트의 제목, 설명, 부가정보, 기술적 내용(예. 이 사이트는 모바일용인지에 대해)이 들어가는 부분이다. 태그👇👇👇👇👇👇👇👇👇👇👇👇 : 한글, 일본어, 중국어가 포함된 페이지라면 utf-8이라는 값으로 인코딩을 추가해줘야 한다. .. 2020. 6. 12.
HTML - 1. HTML/브라우저/Tag 1. HTML Hypertext Markup Language, 웹페이지를 만들기 위한 언어이고 구조를 잡을 수 있다. HTML 파일은 이미지, 텍스트, 비디오, 버튼 등을 웹사이트에 보여줄 내용을 구성하고 있다. HTML 파일 뒤엔. html 확장자가 있어야 한다. 2. 브라우저 쉽게 접근하자면 safari, chrome, ie 등을 브라우저라 한다. 브라우저는 HTML 파일을 가지고 뭘 어떻게 그려주면 되는지 파악한 후에 웹 페이지를 생성해준다. 브라우저만 있으면 HTML로 작성한 것을 확인할 수 있다. (Text Editor 같은 간단한 메모장 실행 후 html(. html) 확장자로 저장 후 해당 파일을 브라우저에 drag & drop 해주면 된다.) 3. Tag HTML에서 이미지나 텍스트를 표현.. 2020. 6. 12.

티스토리툴바