티스토리

샷타이거's Simple Blog
검색하기

블로그 홈

샷타이거's Simple Blog

siana.tistory.com/m

웹.웹... 그리고..웹..

구독자
0
방명록 방문하기
공지 환영합니다~ 모두보기

주요 글 목록

  • HTML 엘레먼트 <main> 태그 태그는 해당 문서의 요소의 주 콘텐츠(main content)를 정의할 때 사용합니다.  요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다. 따라서 하나의 문서에는 단 하나의 요소만이 존재해야 하며, 요소는 , , , , 요소의 자손 요소가 되어서는 안 됩니다. Most Popular Browsers Chrome, Firefox, and Edge are the most used browsers today. Google Chrome Google Chrome is a web browser developed by Google, released in 2008. .. 공감수 2 댓글수 2 2024. 9. 30.
  • 웹디자인 관련 무료 EBOOK 소개 오늘은 지난해 출시된 웹디자인 관련 무료 전자책을 소개해 드릴까합니다. 총 18권의 전자책으로 CSS, HTML, SVG, 자바스크립트, 웹 기초, 반응형 웹 디자인 등 각 분야의 도움이 되는 내용을 담고 있습니다. 아쉽게도 모든 문서는 영문으로 제작되어 어느정도 웹언어에 대한 지식이 없다면 이해하기 쉽지 않을것 같습니다. 저도 사실 전부 이해는 되지 않았습니다. 다만 몇가지 책은 현재 진행되는 프로젝트에 많은 도움이 될정도로 핵심적인 내용을 담고 있습니다. 아래의 웹디자인 전자책을 통해 웹에 대한 이해도를 높여보세요.~~   Adaptive Web Design by Aaron Gustafson (HTML) Aaron Gustafson이 작성한 웹디자인 전자책입니다. 웹디자인의 철학, 메커니즘의 기원, .. 공감수 8 댓글수 6 2024. 9. 30.
  • CSS Flex(Flexible Box) 완벽 가이드 대부분 사이트는 전체 레이아웃이 수직 구성이며 ‘위-아래’로 스크롤 하여 사용합니다. 레이아웃을 구성할 때 가장 많이 사용하는 요소(Elements)들이 기본적으로 블록(Block) 개념으로 표시(Display)되며 이는 뷰(View)에 수직(위에서 아래로)으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 만들 수 있습니다. 하지만 수평(왼쪽에서 오른쪽으로) 구성의 경우는 상황이 조금 다릅니다. 문제는 수평 구조를 만드는 속성이 명확하지 않았기 때문인데, 그래서 많은 경우 나 float 혹은 inline-block 등의 도움을 받았습니다. 하지만 이러한 방법들은 다양한 문제(Clear, White space 등, 해결은 가능하지만..)를 가지고 있기 때문에 결국 수평 레이아웃 구성의 차선책일 뿐이며, 이제.. 공감수 0 댓글수 1 2021. 5. 2.
  • 간단한 jQuery 갤러리 간단한 jQuery 갤러리간단한 클릭이벤트 레이아웃 갤러리.클릭시 하단 박스와 그아래 텍스트를 변경한다. 대략적인 레이아웃 박스구조. html소스 총 5명의 사진을 올릴것이다. 이미지는 썸네일이미지5장, 보여줄이미지 5장. 유사반복되는 중간에 생략했다. 1234567891011121314151617181920212223242526아이돌 갤러리 아이유 소유 아이유 Colored by Color Scriptercs 클릭시 하이퍼링크의 주소와 제목이 하단이미지박스의 주소와 텍스트으로 된다 1cs이 주소와 제목이 아래에 적용12 텍스트cs jQuery없이 스크립트로만 구현하면 길어진다.12345678910111213141516171819function showPic(whichpic) { var source = .. 공감수 0 댓글수 0 2015. 10. 30.
  • DOM 스크립트 소스-소스 코드 예제 DOM 스크립트-소스 코드 예제 에이콘풀판사 DOM 스크립트 요약본 http://channy.creation.net/project/domscripting/ 간단히 살펴보는 자바스크립트 역사자바 스크립트 문법 익히기문서 객체 모델(DOM)이란? Test: alert title 속성 자바스크립트로 만드는 온라인 사진첩 Image Gallery 1: 자바 스크립트 없는 페이지Image Gallery 2: 사진 넣기Image Gallery 3: 사진 및 텍스트 넣기Image Gallery 4: 스타일 꼭 알아야 할 핵심 기본기 Example: 스크립트 분리로 팝업 창 만들기 사진첩 기능 개선하기 Image Gallery 1Image Gallery 2Image Gallery 3 실행시에 마크업 코드 생성하기 Te.. 공감수 1 댓글수 0 2015. 2. 22.
  • HTML5 콘텐트 모델 HTML5 콘텐트 모델HTML5의 각 요소들은 특성에 따라 분류된다. 한요소가 어떤 분류에도 속하지 않을 수도 있고 여러 분류에 속해있을 수도 있다. 분류는 아래 이미지와 같이 분포하고 있다.(이미지는 원본에서 확인가능하며 표로 정리된 것만을 발췌하였습니다.) 분류특성엘리먼트 메타데이타 콘텐트(metadata content)콘텐츠의 모양, 동작을 설정하거나 다른 문서와의 관계를 나타낸다. base, command, link, meta, nocript, script, style, title플로우 콘텐트(flow content)대부분의 body 요소 안의 요소들이 포함된다. 플로우 콘텐트는 하위에 텍스트나 임베디드 콘텐트를 포함한다.a, abbr, address, map>area, article, aside.. 공감수 0 댓글수 0 2015. 2. 21.
  • html5 h1 엘리먼트 (section,article,aside,nav안에서) 사용의 주의사항 html5 h1 엘리먼트 (section,article,aside,nav안에서) 사용의 주의사항 아주 큰 주의사항은 아니지만 브라우저별 다른 반응에 다른 반응을 보이니 살펴보자 주제1 주제2 주제3 위의 예제에서 h1엘리먼트는 첫번째는 section안에 두번째는 section안에 section에, 마지막은 그냥 코딩되어있다.문제는 브라우저마다 다르게 보인다는것몇몇 브라우저에서는 세개다 동일한 크기지만 몇몇브라우저는 크기가 다르게보인다 위예는 파이어복스와 오페라큰문제는없다.css를 사용하니 css초기값으로 동일하게 잡아주면 당연히 해결. 다만 css를 잡아주지 않을경우 대비해서 포스팅 공감수 2 댓글수 0 2014. 3. 5.
  • hgroup 태그, HTML5에서 제외(hgroup removed from HTML) hgroup 태그, HTML5에서 제외(hgroup removed from HTML) 뒤늦게 올린다만. 2013 4월경 hgroup 태그가 html5에서 제외됬다. 다음링크참조 http://www.webmonkey.com/2013/04/w3c-drops-hgroup-tag-from-html5-spec/ http://www.w3.org/html/wg/wiki/ChangeProposals/hgroup https://www.w3.org/Bugs/Public/show_bug.cgi?id=11731 http://beautifulcss.com/archives/882 W3C는 더이상 태그를 표준 명세에 표함시키지 않겠다고 밝혔습니다. 이 태그는 문서의 개요를 작성할 때 사용되는데, 반드시 부터 까지의 태그만을 포함할.. 공감수 0 댓글수 0 2014. 2. 27.
  • CSS 단위 CSS 단위 위는 절대값 아래는 상대값 단위 설명 in 인치(inch) cm 센치미터(centimeter) mm 밀리미터(millimeter) pc 피카 (1피카=12포인트=1/6인치) pt 포인트(1/72인치) % 다른속성값에 대한비율 ex 현재폰트의 x-height em 엘레먼트 폰트크기에상대적 px 픽셀(현 컴뷰터씬의 한 도트) rem root 엘리먼트에 상대적 각도와 시간 단위 설명 deg 각도0~360 grad gradian 각도 0~400 rad 라디안 0~6.28 turn 회전수 1turn=360deg s 1초 ms 밀리초(1/1000s) 공감수 0 댓글수 0 2014. 2. 25.
  • HTML5 전역속성 (Global Attributes) HTML5 전역속성 (Global Attributes) 굵고 빨간건 HTML5부터 적용된것 Attribute Description accesskey 키보드 단축키 명시하고 그 페이지에서 엘리먼트를 선택 할 수 있도록한다. class 다수 선택자,엘리먼트 분류 contenteditable ture 설정으로 사용자들이 텍스트변경가능 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable contextmenu 엘리먼트의 콘텍스트 메뉴들을 정의할 수 있도록한다. 이메뉴들은 사용자가 트리거시 팝업된다. (현재는와 함께 지원되는브라우저없슴) data-* HTML 태그 안에서 사용자 데이타 저장한다 http://www.w3sch.. 공감수 0 댓글수 0 2014. 2. 24.
  • CSS3 :first-line and :first-letter 문장 첫글자크게하기 CSS3 :first-line and :first-letter 문장 첫글자크게하기 문장의 첫글자를크게하는방법으로 :first-line 와 :first-letter를 사용할것이다.먼저 :first-letter를 이용하여 첫글자를 크게 p:first-letter { font-size: 50px; } 다음은 첫번째 줄을 굵게 p:first-line { font-weight: bold; } 그런데 두 문단이라면 이 두문단의 첫글짜가모두 커져버릴 것이다. 우리목표는 단첫번째껏만 선택, 적용하는 것이다.:first-child를 이용하자 p:first-child:first-letter { font-size: 50px; } p:first-child:first-line { font-weight: bold; } 제대로 된.. 공감수 6 댓글수 0 2014. 2. 18.
  • HTML5 크로스브라우징 HTML5 크로스브라우징 html5shiv, ie9.js, ie7.js, modernizr, and css3pie(출처) * html5shivHTML5 요소를 지원하지 않는 브라우저에서 해당 요소를 지원할 수 있게 해주는 라이브러리. * ie9.js, ie7.jsIE를 사람답게(...) 만들어 주는 라이브러리. 구버전의 Internet Explorer에 있는 HTML 및 CSS issue들을 fix함. 투명 png에 대한 부분에 대해 처리.단순히 head 부분에 위 구문을 집어넣으면 된다. * ModernizrHTML5 & CSS3을 지원하는지를 체크해 줌.html5shiv를 포함하고 있음. 그리고 많은 일을 하지만, 딱히 html5의 많은 요소들을 쓰는 것이 아니라면 사용하지 말 것. 왜냐하면 페이지 .. 공감수 0 댓글수 0 2014. 2. 18.
  • HTML5 예제 : 이미지와 설명텍스트 코딩 HTML5 예제 : 이미지와 설명텍스트 코딩간단한 이미지와 설명이 되있는사이트를 html5로 코딩해보자 실험할 사이트는 Pinterest이다 http://pinterest.com/사이트중 이걸 코딩 해보도록한다.첫번째로 원래 있던걸 보자 .가 너무 많이쓰이다보니 뭐가뭔지 햇갈 린다. html5에서는 우리가 익숙하지않아서 그렇지 좀더 명확화 할수있다. Repin Like Comment Awesome cat description. 25 likes 2 comments 100 repins Me onto here 1. 첫번째로 , , 를 사용한방법이다 Repin Like Comment Awesome cat description. 25 likes 2 comments 100 repins Me onto here 2. .. 공감수 0 댓글수 0 2013. 1. 23.
  • CSS3 트랜지션 (transition) 효과 CSS3 트랜지션 (transition) 효과 트랜지션은화면의 변화나 움직을 보여주고 싶을때 쓸수있다. 사용방법은 다음과 같다 transition: property(변화시키고자 하는요소, 배경생 폰트컬러 등) duration(액션이 진행될 시간) timing-function(액션의 방법) delay(지연시간); div{ transition: color 2.5s ease-in 0;} 위는 간단한예. 브라우저마다 -moz-,-webkit-,-o-를 붙여야된다(귀찮아서 생략). 물론 IE는 지원하지 않는다. 공감수 0 댓글수 0 2012. 3. 5.
  • CSS3 Transforms 소스 변환, 추출기 CSS3 Transforms 소스 변환,추출기 이것저것 바쁘고 빨랑사용해야 할때 쓰는 것. 각도,크기, 이동을 입력하면 각브라우저 버전에 맞게 소스가 나온나 IE도 가능하다 IE's CSS3 Transforms Translator http://www.useragentman.com/IETransformsTranslator/ 공감수 0 댓글수 0 2012. 3. 5.
  • CSS3 엘리먼트 변형 3D (Transform 3D) 매트릭스 이용 CSS3 엘리먼트 변형 3D (Transform 3D) 매트릭스 이용 매트릭스를 이용해 3D변화는 무궁무진하다. 하지만 2D에 비해 좀 어여운게 사실. 삼각함수 회전 정도는 이해한다는 가정에 포스팅한다.매트릭스를 바로 체험 해볼수 있도록 링크를 걸어두었다. (웹킷기반 브라우저만 지원) http://sianasiatiger.cafe24.com/study/matrix3dexplorer/matrix3dexplorer.html 스크롤바를 조절하여 결과를 볼 수 있을 것이다. 이제 하나하나 살펴보자. 4열 은 투시도법이다. 그외 것은 아래설명 1. 디폴트 : 아무변화 없는 그대로다. 단위 행렬이다. [1,0,0,0], [0,1,0,0], [0,0,1,0], [0,0,0,1], 2. 크기변환 : 대각선의 S값을 변.. 공감수 0 댓글수 0 2012. 3. 5.
  • CSS3 엘리먼트 변형 3D (Transform 3D) CSS3 엘리먼트 변형 3D (Transform 3D) 3D엘리먼트를 둘러보자 먼저 믿기지않을 정도의 예제를 보자. IE, 오페라는 지원하지 않는다. 변형을 이용한 CSS3만으로 만들어진 애니메이션 http://sianasiatiger.cafe24.com/study/css3butterfly/butterfly.html Function Description matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Defines a 3D transformation, using a 4x4 matrix of 16 values translate3d(x,y,z) Defines a 3D translation translateX(x) Defines a 3D translation, using only .. 공감수 0 댓글수 0 2012. 3. 5.
  • CSS3 엘리먼트 변형2D (transform) CSS3 엘리먼트 변형2D (transform) 엘리먼트를 포토샵에서 편집하지않고 마음대로 바꿀수 있다는건 참 편리한 점이다.CSS3부터 적이 가능하다.3D도 있다. 여기선 2D를 둘러본다 IE는9부터 지원한다. 기본적으로 transform 을 사용하다.그 뒤의 값으로는 ratate,scale,skew,traslate,martix가 있다. 각 브라우저마다 앞쪽에 접두사를 붙여야된다(그림 참조). 이 그림처럼 여러변형이 가능하다예제는 첫번째만 붙이고 나머지는 포스팅 편의상 간략히 transform 만 해줬다. 소스는 다음과 같다.matrix는 크기,이동,회전등 한번에 다 표현 할 수 있는것으로 조금 복잡하기만 할뿐 크게 어렵지 않다. 매트릭스를 테스트 해볼 툴도 있으니 가보자 http://sianasiat.. 공감수 0 댓글수 0 2012. 3. 5.
  • CSS3 투명도(opacity) 그림자(shadow) 설정 CSS3 투명도(opacity) 그림자(shadow) 설정초창기 부터 주목되었던 투명도와 그림자에 대해 알아본다 투명도(opacity) 투명도를 설정함으로서 뒤의 z-inex설정에서 뒤에 엘리먼트라던가 겹친 엘리먼트를 보이게하는 등의 모습을 구현 할 수 있다.브라우저는 역시 IE가 예외 IE9는 지원한다. 단 IE8이하버전은 필터를 사용해야한다. box1 opctical 50% box2 opctical 30% 포지션은 겹치게 했다. div{ width:300px; height:150px; position:relative;} .box1{ left:100px; top:30px; background-color:#F00; opacity:.5; } .box2{ left:150px; top:-50px; backgr.. 공감수 0 댓글수 2 2012. 3. 4.
  • CSS3 border-image 테두리 이미지 CSS3 border-image 테두리 이미지라운드 박스를 만들 수 있을 뿐만 아니라 이제는 이미지 까지 가능하다. 일단 필요한 것은 정사각형 이미지 이 이미지의 귀퉁이가 꾸며줄것이고 가운데는 각 변을 반복할 것이다. 이 그림 사이즈는 90px X 90px이다 html은 생략 h2엘리먼트에 아무글이나 쓰자. 그리고 CSS는 다음과 같다. 브라우저 마다 다르므로 모질라,웹킷속성도 지정했다. 좀더 참조할려면 여기 http://www.w3schools.com/cssref/css3_pr_border-image.asp h2{ width:200px; border-width:30px; -moz-border-image:url(../images/flower.jpg) 30 round; -webkit-border-image.. 공감수 0 댓글수 0 2012. 3. 4.
  • CSS3 라운드박스 및 박스 속성 CSS3 라운드박스 및 박스 속성 CSS3 부터는 라운드박스는 지원된다. 이미 옛부터 이야기 되었지만 여전히 문제는 IE. IE는 IE9부터 지원된다.일단 박스 속성부터 둘러보자.여기서 말하는 박스는 CSS에서 우리가 정의한 가로 세로(ex: div{ width:100px; height:100px;} )를 말하는 것이아니라 계산되어 화면에 보여진 박스를 말하는 것이다 박스 속성, 콘텐츠,마진,패딩,보더 레이아웃을짤때 우리는 계산을 잘하고 만들어야 한다 가로는 콘텐츠너비+패딩+ 보더이다. 브라우저 플러그인 파이어버그(FireBug)를 설치하고 레이아웃을 보면 쉽게 확인할수 있다. 캡처한 그림과 같이 보더도 계산된다는것을 잊지말자. 아웃라인(outline)과 보더(border) 위와 같이 보더는 박스계산에 .. 공감수 0 댓글수 0 2012. 3. 4.
  • CSS3 배경색 그라디언트 소스를 만들어주는 툴 CSS3 배경색 그라디언트 소스를 만들어주는 툴 그라디언트까지 줄수 있게되었는데 하나하나 설명하려 했지만 그보다 툴바가 좋을듯하다 div{ background:-moz-linear-gradient(46% 75% 101deg, #18A1AB, #3EC992); } div{background:-webkit-gradient(linear, 50% 71%, 50% 56%, from(#312C4A), to(#2F3366), color-stop(.6,#333333)); } 아래는 직접 소스를 구할수 있는 사이트. 모질와 웹킷에따라 선택하면 된다 오페라는 지원안되며 익스플로어는 IE10부터 지원 http://westciv.com/tools/gradientsnustyle/index.html 공감수 0 댓글수 0 2012. 3. 3.
  • CSS3 투명도를 가지는 색상값 rgba HSL HSLA CSS3 투명도를 가지는 색상값 rgba HSL HSLA 이전의 생상 키워드는 잘 알것이다.초반에 rgb방식이 있었지만 거의 16진수 코드를 사용하는편 div{ background-color:#000;} div{ background-color:#00000;} div{ background-color:rgb(0,0,0);} rgba rgb는 알다시피 레드, 그린, 블루이고 마지막 a는 알파, 즉 투명도이다. 마지막 투명도는 .3 이면 30%다 div{ background-color:rgba(0,0,0,.3);} HSL HSLA 어렵게 생갈할거없다. 색조,채도, 명도 그리고 마지막은 알파값 div{ background-color: hsl(0,100%,50%);} div{ background-color: hsl.. 공감수 0 댓글수 0 2012. 3. 3.
  • CSS 타이포그래피 CSS 타이포그래피 타이포그래피 관련 텍스트 속성들을 알아본다. 간단하게 예제만으로 복습해보자. 일단 타이포그래피라면 알고있어야 할 것들 자간: 글자 하나하나 사이의 간격 어간: 단어사이의 간격 행간: 줄사이의 간격 자간 공감수 0 댓글수 0 2012. 2. 24.
  • CSS3 font-size-adjust 대채폰트의 크기조절 x-height, Aspect Value CSS3 font-size-adjust 대채폰트의 크기조절 x-height, Aspect Value 일단 참조할 것 타이포그래피(Typography ) 각 폰트별 x-height 크기 도표 http://blog.naver.com/siatiger w3c css3 font 소개 :http://www.w3.org/TR/css3-fonts/ 웹폰트 Aspect Value http://www.barrypearson.co.uk/articles/text/aspect_values.htm adjust 란 단어는 “조정하다”란 뜻으로 말 그대로 폰트 크기를 조정해주는 역할을 하는 속성이 font-size-adjust 이다. 영어는 대소문자가 구별되는 언어이고 그 때문에 폰트의 종류에 따라 특히 소문자의 크기가 다르게 표현.. 공감수 0 댓글수 1 2012. 2. 22.
  • CSS 폰트 (font) 정하기 CSS 폰트 (font) 정하기 먼저 한번에 지정할수 있는 font 말고 font-size등 간단정리하고 전체를 정의하는 font를 알아보자 폰트 크기 설정 폰트크기는 여기서 참조하자 바로테스트확인할수 있다. http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=xx-small 예제는 다음과 같다 h1{ font-size: 100%;} h2{ font-size: larger;} h3{ font-size: small;} h4{ font-size: 1.9em;} p{ font-size: 9pt;} 다음은 폰트크기를 요약 한것 상댓값 % : 부모 엘리먼트와 비교한다 em : 현재 폰트 크기에 비교(1.9는 190%) px : .. 공감수 0 댓글수 0 2012. 2. 22.
  • CSS 폰트 : 웹안전 폰트와 다운 CSS 폰트 : 웹안전 폰트와 다운 웹안전폰트 폰트는 사용자가 컴퓨터에 있어야 사용가능하다. 옛날에는 단지화려하게 꾸미기위해서 별 폰트들을 남발했지만 요즘은 사라진지오래다. 일단 웹안전 폰트부터 살펴보자. Generic Family Family Name Example Windows Font Name Mac Font Name Sans-serif Normal fonts without serifs Arial Arial Safe Fonts, 안전서체, 安全書体, 安全字体 Arial Black Arial Black Safe Fonts, 안전서체, 安全書体, 安全字体 Lucida Sans Unicode Lucida Grande Safe Fonts, 안전서체, 安全書体, 安全字体 Tahoma Geneva Safe F.. 공감수 0 댓글수 0 2012. 2. 21.
  • CSS (CSS3) 속성선택자 (attribute selector) CSS (CSS3) 속성선택자 (attribute selector) CSS2에서도 지원했지만 CSS3에서 좀더 추가되었다. 예제를 통해간편히 확인해보자.아래 html에서는 각포탈사이와 그에 따라 title속성에 값을 주었다. 티스토리 네이버 다음 네이트 드림위즈 야후 구글 이번엔 CSS를 보자 정의 한것 [attr] : 속성값을 가지는경우 [attr=" "] : 속성값이 정확히 일치 [attr~=" "] : 속성값이공백으로 구분한 경우 [attr|=" "] 속성값이 하이픈으로 구분한 경우 아래 세개는 CSS3에 추가된것이다 [attr^=" "] 속성값이 주어진값으로 시작한경우 [attr$=" "]주어진값으로 끝나는경우 [attr*=" "] 속성값이 일부일치한다면 적용 아래는 적용한 예제다 /*title .. 공감수 2 댓글수 0 2011. 12. 30.
  • CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part3 선택자(selectors) - 유사클래스(pseudo-class) Part3 :first-letter :first-line 텍스트의 첫글자 텍스트의 첫줄을 말한다. 흔히 책에서 첫글자나 첫줄을 강조할때를 생각하면된다.예제를 통해 자세히 보자 The moment Alice appeared, she was appeal...... The executioner's argument was, that you couldn't cut.. The executioner's argument was, that you couldn't... 위와같은 세문장에서 첫번쩨 문단의 문자 T를 크게 하고 첫라인을강조하려한다. 첫번째 문단을 선택하기위해 :first-of-type 선택자를 사용했다. p { /*기본설정*/ font-size.. 공감수 2 댓글수 0 2011. 12. 29.
  • CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part2 선택자(selectors) - 유사클래스(pseudo-class) Part2 :empty 공백 유사클래스이다. 엘리먼트안에 아무것도 없어야 한다. div크기만 정해줬고 배경색을 지정했다. div{width:100px; height:100px;} div:empty{ background:#000;} :root 문서의 최상위 엘리먼트 html과 같다고 보면 된다. 왜 생겼는지 확신하지못하겠지만 스타일에서 html 지정시 충돌하는점을 방지하기위해서라 생각된다. :only-child 유일자식으로 자식이 하나밖에 없을때 유용하다. 첫번째 자식이고 두번째 자식이므로 적용안됨 자식하나뿐임 아래와 같이 사용하면 자식 엘리먼트에 하나뿐임에 적용된다. li:only-child {color: #F00;} :only-of-ty.. 공감수 4 댓글수 0 2011. 12. 29.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.