구차니의 잡동사니 모음

The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element should be unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class="center" will be red and center-aligned:

[링크 : http://www.w3schools.com/css/css_syntax.asp]

id는 유일한 거라고 하지만.. 크롬이나 ie에서 실험적으로 해봐도

경고나 에러를 띄우진 않는데.. 머가 맞는걸려나..

[링크 : http://okky.kr/article/89313]

[링크 : http://www.homejjang.com/07/class_id.php

크게는 세가지

1. html에 style을 이용해서 적용

2. css를 끌어와서 적용

3. 어트리뷰트로 사용

[링크 : http://www.w3schools.com/html/html_css.asp]

마진은 밖으로

패딩은 안으로

[링크 : http://blognike.tistory.com/8]

헐.. 어쩐지.. 암만 찾아도 게임 홈페이지 배경에 이쁜게

html 소스에 안보이더라니 ㄷㄷ

[링크 : http://www.w3schools.com/cssref/css3_pr_background.asp]

[링크 : http://refresh-sf.com/] 줄바꿈 없애서 용량 줄이기

    [링크 : http://demun.tistory.com/2148]

[링크 : http://blog.munilive.com/php-css-js-file-compression-send-htaccess-use/] 헤더 사용 압축

minify / beautify

[링크 : http://dev.nkia.net:8089/?p=730]

엇.. css에서 >는 연산자가 맞긴한데.. 비교가 아니었구나

div > p는 div 하위의 p 에 대해서 css를 적용한다 라는 의미

즉, div 안에서 쓰는 p와 그냥 p를 서로 다르게 줄 수 있다는 것

element,element div, p Selects all <div> elements and all <p> elements 1

element element div p Selects all <p> elements inside <div> elements 1

element>element div > p Selects all <p> elements where the parent is a <div> element 2

element+element div + p Selects all <p> elements that are placed immediately after <div> elements 2

element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element

[링크 : http://www.w3schools.com/cssref/css_selectors.asp]

tag

{

property: value value2 value3;

}

[링크 : http://www.w3schools.com/cssref/default.asp]

CSS도 공부해보자 -_-!!!

HTML comments : <!-- 로 시작하고 -->로 끝난다. 

CSS comments : /* 로 시작하고 */

[링크 : https://nolboo.github.io/blog/2013/07/22/beginners-guide-to-html-and-css-1-slash-10/]

<link href="style.css" rel="stylesheet" type="text/css">

<style type="text/css">

@import url(style.css); 

</style>

<style type="text/css">

.logo {color: #eeeeee;} 

</style>

<p style="height:100px; color:blue">

[링크 : http://webdir.tistory.com/338]

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

[링크 : http://www.w3schools.com/css/css_syntax.asp]

[링크 : http://www.w3schools.com/css/default.asp]

+ 2015.09.16

Inline Styling (Inline CSS)

Internal Styling (Internal CSS)

External Styling (External CSS)

[링크 : http://www.w3schools.com/html/html_css.asp]