본문 바로가기
반응형

분류 전체보기333

[html/css] vertical-align 속성 자세히 알기(수직 정렬) [html/css] vertical-align 속성 자세히 알기(인라인 요소의 수직 정렬) vertical-align 속성, 그저 수직 정렬할 때 쓰이는 걸로만 알고 있었는데 정리하다 보니 너무 너무 어렵네요 필요하신 부분만 골라서 보시면 되겠습니다~ css에서는 인라인 요소와 인라인 블록 요소를 수직 정렬할 때 vertical-align 속성을 씁니다. vertical-align 속성은 다음과 같은 특징이 있습니다. 『 1. inline이나 inline-block 요소에만 적용 됨 따라서 block 요소인 는 이 속성을 썼을 때 작동되지 않음. 2. 요소 자체만을 정렬하고, 내용에는 영향을 미치지 않음. (table cell에 적용할 때는 제외) 3. table cell에 적용할 때는 내용에 영향을 미.. 2014. 6. 5.
RSS 무단 수집 주의하세요(RSS 부분 공개하는 방법) RSS 무단 수집 주의하세요 (RSS 부분 공개하는 방법) 얼마 전에 우연히 네이버 검색창에 제 블로그 이름 를 조회해 보았습니다. 그랬더니 제가 쓴 글과 동일한 제목이 웹사이트에 나와서 들어가 보았습니다. 제 글의 일부분과 목차를 그대로 올려 놓았고, 광고까지 달아 놓았더군요. 문제는 작성자 이름이 전혀 나와 있지 않아, 마치 이 사이트에 제가 직접 쓴 글로 오해할 수도 있겠다 싶더라고요... 잠깐 사이트를 둘러 보니 RSS 수집 사이트로 보였고, 원치 않을 경우 게시중단 요청을 하도록 돼 있습니다. 그런데 등록도 하지 않은 사이트에 무단으로 남의 글을 수집해 놓고, 게시중단을 해야 제 글을 내릴 수 있다니요? 더 자세히 찾아 보니 제 글 약 2페이지의 목록을 그대로 긁어갔더군요.... 헐~ (지금은 .. 2014. 6. 3.
비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE 비표준 모드quirks mode, 표준 모드standards mode 차이와 DOCTYPE 선언 HTML과 CSS를 공부하다 보면 이런 단어를 많이 접합니다. 비표준 모드quirks mode, 표준 모드standards mode, 거의 표준 모드 almost standards mode , 엄격 모드strict mode 영어 자체의 뜻도 어렵지만, 우리말로 써도 솔직히 무슨 말인지 감이 잡히지 않았습니다.. -_-; 그래서 이들 단어 유래(?)와 뜻을 한 번 정리해 보았습니다. 상호호환성을 위한 렌더링 모드 웹페이지는 HTML과 CSS로 만들어지는데, 오래된 브라우저는 HTML과 CSS 명세(W3C 표준)가 완성되기도 전에 개발되어서, 이들 표준에 잘 부응하지 못하였습니다. 크로스브라우징, 웹표준과 핵(h.. 2014. 6. 2.
[html/css]background 속성(배경 전체 지정) [html/css]background 속성(배경 전체 지정) 차례 : background-image background-repeat background-attachment background-position background-size background 끝나지 않을 것만 같았던 배경 관련 속성이 오늘로 끝나네요. 배경 이미지와 관련해서는 background-origin 속성과 background-clip 속성이 더 있지만 이 부분은 나중에 다루어 보겠습니다. background 속성은 지금까지 다루었던 배경과 관련된 속성을 한꺼번에 지정할 수 있습니다. 사용 예 : body { background: green url('brabbit.png') no-repeat fixed 50% 50%/100% 100%.. 2014. 5. 30.
[html/css]background-size 속성(배경이미지 크기 조절) [html/css]background-size 속성(배경이미지 크기 조절) 차례 : background-image background-repeat background-attachment background-position background-size background 배경 이미지에 대한 속성을 다뤄 보고 있습니다. 오늘은 배경 이미지 크기를 조절하는 background-size 속성입니다. 나머지 하나만 다루면 배경 이미지에 대한 것은 모두 끝나네요^^ 모두 힘 내세요!^^ background-size 속성 우선 배경 이미지 크기(너비와, 높이)를 조절하는 이 속성은 아래 브라우저에서만 지원합니다. IE9+, Firefox, Opera, Chrome, and Safari ▶속성값 auto 기본값으로 배.. 2014. 5. 29.
사적인 이야기 그동안 책하고 담 쌓은 지도 좀 되었나 보다. 책이 가득 쌓인 공간이 한편으로는 낯설고, 한편으로는 그립고 관심가는 책 제목을 사진에 담아 보기도 하고, 털썩 주저 앉아 중간 중간 읽어 보기도 한다. '그랬었지...... '그래, 그랬었는데.....' 과거를 되돌아 보는 시간이 이리도 적었나, 그리고 왜 뒤를 돌아보지 않았던 걸까 앞만 보고 달려 가는 바보 경주마처럼 누가 그렇게 독촉하지도 않았는데 나의 시적 감수성은 어디로 가버린 것인지.... 그래, 나는 광장에서 목소리를 내는 사람은 아니었으니 그리고 그걸 좋아하지도 않았으니 고전이라는 건, 광장에서 나는 큰 목소리가 아니라는 걸 알고 있었는데 순수한 꿈을 이룬다는 것과, 돈을 잘 번다는 것은 또 다른 일인가 보다 결국, 나 자신으로 다시 돌아온 셈.. 2014. 5. 28.
[html/css] line-height 속성 배우기 [html/css] line-height 속성 배우기(줄간격) font 속성을 배우면서 같이 다루었어야 하는데 이제야 정리를 합니다. line-height는 줄간격을 지정하는 속성입니다. ▶ 속성값 normal 기본값으로 보통 1.0 ~1.2 입니다. 숫자 현재 글꼴에서 몇 배 크기로 할지 지정 현재 글꼴이 14px 이라면, line-height: 1.5로 할 경우, 줄간격이 21px 높이로 지정됨 길이 px, pt, cm, em등의 고정된 폭 % 현재 글꼴크기의 백분율로 높이를 지정 상속 여부 : 상속 됨. *음수 값은 지정되지 않음 글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이) ▶ 사용 예 숫자로 지정 할 때 : div{ font-size: 1em; line-height.. 2014. 5. 27.
[html/css]background-position 속성(배경이미지 위치 지정) [html/css]background-position 속성(배경이미지 위치 지정) 차례 : background-image background-repeat background-attachment background-position background-size background 지난 시간엔, 배경 이미지를 고정하는 background-attachment 속성에 대해 배웠는데요 오늘은 배경 이미지 위치를 지정하는 background-position 속성입니다. background-position 속성 ▶속성값 left top 왼쪽 상단 left center 왼쪽 중앙 left bottom 왼쪽 맨아래 right top 오른쪽 상단 right center 오른쪽 중앙 right bottom 오른쪽 맨아래 ce.. 2014. 5. 26.
마리안느, 테이블야자 분갈이 하는법(분갈이 3종 세트 사용 후기) 마리안느, 테이블야자 분갈이 하는법(분갈이 3종 세트 사용 후기) 혼자 살 때부터 키우던 화분들, 거의 3년이 다 되어 분갈이를 해야겠다 생각을 하고 있었는데 미루다 미루다, 드디어 지난 주에 분갈이를 했습니다.^ ^ 예전에는 화원에 직접 가서 분갈이 흙과 마사토를 사고, 깔망은 양파그물망을 대신해서 분갈이를 했었는데요 이번에는 다이소에 가서 '분갈이 3종 세트'라는 걸 사 보았네요. 분갈이 3종 세트에는 분갈이에 필요한 총 3가지가 들어가 있습니다. 부엽토, 마사토, 화분바닥망사 중국산이면 좀 찝찝할 것 같아 안 사려고 했는데 국내산이라고 쓰여 있어 한번 써 보기로 했어요. 분갈이흙과 마사토의 비율 분갈이할 때는 보통 분갈이용토와 마사토를 섞어 쓰는데요, 마사토는 모래입니다. 화초에 따라 이 마사토의 .. 2014. 5. 23.
[html/css]background-attachment 속성(배경이미지 고정) [html/css]background-attachment 속성(배경이미지 고정) 차례 : background-image background-repeat background-attachment background-position background-size background 배경이미지를 넣을 때는 background-image 속성, 배경이미지 패턴을 선택할 때는 background-repeat 속성을 배웠습니다. (위에 링크 참조) 오늘은 배경 이미지를 어떻게 고정할지 결정하는 background-attachment 속성입니다. background-attachment 속성 : 배경 이미지 고정 방식 ▶속성값 scroll 기본값으로, 이미지가 요소에 상대적인 위치. fixed 이미지가 윈도우 창에 상대적.. 2014. 5. 23.
반응형

티스토리툴바