Archive | 제품 만들기 RSS feed for this section

[정리]html

14 May

1. ID와 클래스의 쓰임의 차이

클래스는 다수의 요소에 사용이 가능하기 때문에 특정 요소를 유일한 스타일로 쓰고 싶다면 ID를 쓰는 것이 좋다.
-id 사용 방법: #id, p#id
1)#id :  해당 아이디를 가진 요소에 효과 적용
2)p#id: p요소가 해당 아이디를 가지고 있다면 p요소 선택????

2. 스타일 시트 리믹싱

CSS스타일을 여러개 작성하여 한페이지에 여러가지 스타일 적용가능

1)link를 여러개 작성하면 가장 하단의 link가 우선순위로 적용됨
: 상속 개념이 적용되며 상단의 CSS의 효과가 재정의 되지 않으면 그대로 사용함.

2)미디어 상황에 따라서 다른 효과 적용가능-미디어쿼리(440p)
: media=”screen, print 등등”,  max-device-width= 30px, min-device-width, max-width
=>미디어쿼리는 활발히 개발되고 있는 영역임(http://www.w3.org/TR/css3-mediaqueries/)

3. 정렬 요소들
text-align 같은 정렬 속성은 모든 인라인 요소에 적용됨(리스트, 이미지, 단락 등등)
하지만 블럭요소에 적용해야만 작동하며, 인라인 요소에 바로 적용하면 작동하지 않음.

4. 블럭요소에 선언된 ID 사용.
블럭 요소에 아이디가 선언되었을 경우. 그 사용은 #id h2{~~}와 같은 방법으로 사용되어야 한다. h2#id{~~}와 같은 방법으로도 사용 가능 하고 블럭 내부에만 효과가 적용되지만, 만약 블럭 외부의 동일한 요소 속성이 (h2) 선언 되었을 경우 블럭 내부에 적용하고자 했던 속성이 적용되지 않고 외부에서 먼저 선언되 효과가 적용되게 된다.

원리가 무엇인가? :  ID가 선언된 블럭 속의 요소에 접근하고자 할때는 먼저 아이디에 접근하고 그리고 그 안의 요소에 접근하는 것. 그리고 ID나 클래스가 선언된 요소(블럭요소 안에 있지 않은)에 접근할 때는 요소에 먼저 접근하고 나서 아이디나 클래스에 접근한다.

5. 줄간격 비율 속성으로 바꾸기
css  div같은 블럭 요소에 별도의 font-size 설정이 없다면 body와 같은 상위 요소의 속성을 상속 받는다. 이때 블럭요소 div에 line-height를 설정할 경우. 우선순위에 따라서 font-size를 선택하여 line-height속성을 적용한다. 하지만 여기서 블럭요소 div에 h1과 h2같이 font-size가 다른 요소가 존재 하더라도 기본으로 설정된 font-size에 비례해서 line-height를 설정해, 충분한 줄간격이 확보되지 않는 경우가 발생한다.
이 경우 line-height: 1; 과 같이 숫자로만 비율을 설정해주면 각의 요소의 font-size에 적절하게 비례하는 크기로 line-height를 설정한다.

6. 속성 간단하게 작성하기
padding & margin : 위 오른쪽 아래 왼쪽 순서로 입력
border & background : 순서 자유롭게 입력, 세부 속성은 레퍼런스 참조
ex)border- width,style,color
background-color, image, repeat
font : font-style font-variant font-weight(선택사항) font-size(필수)/line-height(선택)  font-family(필수)

7. span 요소
span 요소는 인라인 콘텐츠를 논리적으로 분리 혹은 묶는다.
특정요소를 아주 강하게 강조하고 싶으면 em이나 strong같은 요소를 사용하는 것이고, 스타일 변경을 원하는 경우 span을 사용한다.
인라인 요소의 패팅은 좌우에만 추가 된다. 이미지는 다른 인라인 요소와 다르게 블록처럼 작동한다.

8. 의사 클레스
클래스는 아니나 클래스 처럼 스타일을 명시하는 것을 허용하기 때문에 의사클래스라 한다. 하지만 HTML내부에 직접 입력하진 않는다. 또한 방문자들이 페이지를 사용하는 동안 발생하는 현상에 기반을 두고 여러가지 꾸미기를 제공한다.

9. 캐스케이드
여러 스타일 시트 중 어떤 스타일을 사용할 지 브라우저가 결정하는 방법
작성자>사용자>브라우저 정의의 우선순위를 기준으로 결정하며 그 내에서 여러개의 링크가 존재하는 경우
0 0 0
1)선택자가 id를 가지고 있는 경우 각각 1점
2)선택자가 클래스 혹은 의사 클래스를 가지고 있는 경우 각각 1점
3)선택자가 요소의 이름을 가지고 있는 경우 각각1점
으로  계산해서 크기가 큰 스타일 시트가 우선순위를 가지게 된다.

10. 플로우 속성
플로우 속성은 left와 light가 있으며 해당 블록 요소는 레이아웃에서 떠있는 형태가 된다.
다른 블록 요소는 float 속성이 적용된 블록 요소를 무시하고 인라인 요소는 해당 블럭 요소를 피해서 배열 된다.
플로우 속성이 없는 경우 인라인 요소의 마진은 서로 겹치지 않고, 블록 요소의 마진은 큰쪽으로 합쳐진다.
플로우 속성이 적용된 블럭요소의 경우 상단의 마진은 무시되지 않지만 나머지는 무시된다.(상단 블럭요소의 마진 이후에 배열되기 때문에)

Advertisements

[질문]공부 중 질문들!

13 May

질문1 : css요소에서 padding-left를 설정할 때 em을 기준으로 잡으면 무엇을 기준으로 잡히는가??

답 :padding은 컨텐츠와 관련있는 여유 이므로  해당 요소의 font와 관련되어 비율이 변한다.

ps : padding 말고도 margin요소도 역시 해당 요소 혹은 클래스의 font의 크기와 비례해서 비율의 기준이 변한다.  em은 거의 대부분 그러한듯.

————————————–————————————–————————————–

질문2: HTML에서 ID를 css에서 사용할 때 p#id{~~~}와 #id  h2{~~~}의 차이점은 무엇인가?

상황 : p#id{~~~}의 경우 요소 p에 ID가 직접 선언 되었고, #id h2{~~}의 경우에는 h2를 컨테이너(div)가 감싸고 있는 상황에서 h2에 효과를 주려고 한다.

답 :

추론 :  요소의 ID에 적용되는 효과는 그 요소에 바로 영향을 미치나, 컨테이너(div)내부에는 컨텐츠가 존재 하지 않고 박스만 존재 하기 때문에  컨테이너id에 부과된 효과는 컨텐츠에 영향을 미치지 못할 것이다.

ps : 두번째 것은 컨테이너 외부에 h2의 효과가 이미 선언 되어 있을 때 컨테이너 내부(div)의 h2에 다른 효과를 주기 위해 사용 되었다.(h2#id로 선언하면 외부에 먼저 선언된것이 우선순위를 가졌다.)

————————————–————————————–————————————–

질문3 : ” p#id: p요소가 해당 아이디를 가지고 있다면 p요소 선택” 라고 되어 있는데 ID는 이미 유일하게 할당되는데 굳이 선택하는 이유가 무엇인가? 해당 요소 내부에 또 다른 요소가 있을 경우 p#id의 형식으로 선택 가능한가? 아니면 꼭 #id p의 형태를 선택해야 하는가?

답 : (실험) ID가 선언된 블럭 속의 요소에 접근하고자 할때는 먼저 아이디에 접근하고 그리고 그 안의 요소에 접근하는 것. 그리고 ID나 클래스가 선언된 요소(블럭요소 안에 있지 않은)에 접근할 때는 요소에 먼저 접근하고 나서 아이디나 클래스에 접근한다.

ps : 실험해보고 정리 란에 써놓을것.

[링크]HTML 자료 모음

22 Apr

스크린샷 2013-04-22 오후 11.51.11

시멘틱웹을 위한 참고서

https://docs.google.com/a/jennifersoft.com/file/d/0BwKGpbna5w4_ZTIyYWViYzctOTJiMC00MzE4LWEyNmQtMmM5NGI3OGI3ZGE4/edit#

레퍼런스 북, 2011년 버전. 클리어보스 HTML5 그룹

웹폰트를 사용하는데 도움이 될만한 사이트

FontSquirrel(http://www.fontsquirrel.com/) : 서버에 올려 놓은 무료 오픈소스 폰트

구글 웹 폰트 서비스(http://www.google.com/webfonts) CSS와 포트를 관리 하는 작업을 대신해줌

[링크]HTML5의 모든것

22 Apr

http://channy.creation.net/blog/776

 

HTML5에 대한 자료를 찾다가 잘 나온 자료가 있어서 링크를 남겨 놓는다.

HTML5는 4가 브라우저 개발자들을 위한 표준으로 제작되 일반 개발자들이 개발에 어려움을 겪는 상황을 해결하기 위해 시작 되었으며 WC3와 거의 모든 브라우저밴더들이 참여하고 있다. 개발자들을 위한 새로운 기능들을 제공하고 있으며, UI에서 부터 데이터베이스쿼리 까지 넓은 분야에서 기능을 제공하는 것을 목표로 표준이 만들어 지고 있으며, (많은 기능들이 제정됬으나 아직도 진행중) 위의 홈페이지는 그러한 변화들을 2010년도 부터 잘 정리하여 제공하고 있다.