블로그

CSS_basic1

<style> 태그 추가 The <style> tag is used to define style information (CSS) for a document. Inside the <style> element you specify how HTML elements should render in a browser. 웹 브라우저는 기본적으로 코드를 HTML이라고 생각한다. CSS는 HTML과는 완전히 다른 컴퓨터 언어이다.  그러면 웹 브라우저에게 "웹 브라우저야, 우리가 CSS 코드를 사용할 테니 HTML이 아니라 CSS 문법에 따라 해석해야 해"라고 HTML의 문법으로 이야기해야 한다.   <CSS를 이용해 글자 색을 빨간색으로 변경> a 코드 : 모든 <a> 태그에 대해서   style 속성을 이용해 글자 색을 빨간색으로 변경 style이라는 속성을 쓰면 그 속성의 값을 웹 브라우저가 CSS 문법에 따라 해석해서 그 결과르 style 속성이 위치한 태그에 적용한다. The style attribute specifies an inline style for an element. The style attribute will override any style set globally, e.g. styles specified in the <style> tag or in an external style sheet. <h1 style="color:blue;text-align:center">This is a header</h1><p style="color:green">This is a paragraph.</p> style=""은 HTML의 속성이다. style이라는 속성을 깂으로 반드시 CSS 효과가 들어온다고 약속돼 있다.  <style>이라는 태그는 효과만 있어서는 누구에게 지정할지를 설명할 수 없기에 앞에서 살펴본 '(대상) { }'과 같은 코드가 더 필요하다.          <style>             a {                 color: red;             }         </style> 이와 같이 웹 페이지에서 주고 싶은 효과를 누구에게 줄 것인가를 선택한다는 점에서 선택자(selector)라고 한다. 그리고 선택자에게 지정될 효과를 효과 혹은 delaration이라고 한다.    CSS를 이용해 링크에 밑줄 없애기 text-decoration 속성 : 텍스트를 꾸미는 장식을 넣는 속성. The text-decoration property specifies the decoration added to text, and is a shorthand property for: text-decoration-line (required) text-decoration-color text-decoration-style text-decoration-thickness   구분자로서 세미콜론(;)이 존재한다. 효과를 지정한 다음 항상 세미콜론을 적어야 한다.    현재 선택된 웹 페이지에만 링크에 밑줄 긋기 <!-- 2.html --> <!DOCTYPE HTML> <html>     <head>         <title>WEB1 - CSS</title>         <meta charset="utf-8">         <style>             a {                 color: black;                 text-decoration: none;             }         </style>     </head>     <body>         <h1><a href="index.html">WEB</a></h1>         <ol>             <li><a href="1.html">HTML</a></li>             <li><a href="2.html" style="color:red; text-decoration:underline;">CSS</a></li>             <li><a href="3.html">JavaScript</a></li>         </ol> 해당 태그 안에 text-decoration:underline; 속성 추가하기. 태그 안에 CSS 속성 2개 이상이면 ';'로 구분해주기.    

CSSbasic

채널톡 아이콘