본문 바로가기

전체 글57

HTML, CSS 크로스브라우징 확인하는 사이트 * 사이트명을 클릭하면 해당 페이지로 이동합니다. Can I use 사이트 브라우저마다 HTML태그와 CSS속성의 지원 여부를 확인할 수 있는 Can I use라는 사이트다. 사이트 상단 주황색 박스 속 Can I use 뒤 빈 칸에 확인하고 싶은 HTML태그나 CSS 속성을 넣어 주면 바로 밑에 각 브라우저별 적용 여부를 확인할 수 있다. 빨간색, 초록색, 회색, 갈색으로 표시 되는데 빨간색은 브라우저 미지원을 의미하고 초록색은 브라우저 지원을 의미한다. 갈색은 브라우저에 제한적으로 지원되어 불안정함을 의미하며 회색은 알 수 없음을 의미한다. 해당 사이트를 이용하면 대응해야 하는 사이트에 HTML태그와 CSS 속성의 지원 여부를 확인할 수 있어 크로스브라우징에 유용하다. 2022. 9. 14.
text-decoration으로 텍스트에 선 꾸미기 1. text-decoration? 텍스트를 선으로 꾸밀 수 있는 속성이다. text-decoration은 선의 종류, 스타일, 색상, 선 두께를 설정할 수 있으며 선의 종류를 중복으로 사용해 텍스트를 여러 선으로 꾸밀 수 있다. 2. text-decoration 속성 [선의 종류] none : 선 없음 line-through : 글자 중간에 선을 만듦 overline : 글자 위에 선을 만듦 underline : 글자 아래에 선을 만듦 initial : 기본값으로 설정함 inherit : 부모 요소의 속성값을 상속 받음 [선 스타일] solid : 실선 wavy : 웨이브 선 dashed : 짧은 선 3. 적용 예시 [HTML] text-decoration: none text-decoration: li.. 2022. 9. 14.
box-sizing 속성 알아보기 1. box-sizing? 박스의 너비와 높이를 어떤 기준으로 계산할지 정하는 속성이다. 속성 값은 content-box, border-box가 있다. 2. box-sizing 속성 content-box : 너비와 높이가 콘텐츠를 기준으로 계산된다. border-box : 너비와 높이가 테두리를 포함해서 계산된다. 3. content-box 적용 예시 [HTML, CSS] box-sizing: content-box 총 너비(640px) : width(600px) + 좌.우 padding(20px) + 좌·우 border 두께(20px) [결과 화면] box-sizing: content-box 인 경우 콘텐츠를 기준으로 총 너비가 나타나기 때문에 기존 width 600px에 padding값 좌, 우 각10.. 2022. 9. 13.
white-space으로 공백 처리하는 방법 알아보기 1. white-space? white-space은 띄어쓰기, 탭, 줄바꿈 등 공백을 처리하는 방법에 대한 속성이다. 속성 값으로는 normal / nowrap / pre / pre-wrap / pre-line 있다. 2. white-space 속성 스페이스(띄어쓰기), 탭(들여쓰기) 자동 줄바꿈 입력시 줄바꿈 normal 띄어쓰기 1칸으로 표시됨 ○ × nowrap 띄어쓰기 1칸으로 표시됨 × × pre 스페이스, 탭 그대로 적용됨 × ○ pre-wrap 스페이스, 탭 그대로 적용됨 ○ ○ pre-line 띄어쓰기 1칸으로 표시됨 ○ ○ [white-space: normal] 기본값으로 연속된 공백(스페이스와 탭)의 경우 하나의 공백으로 처리되며 자동 줄바꿈 되어 영역 내에서 내용이 표시된다. [whi.. 2022. 9. 13.
html에 의미없는 텍스트 채우는 방법 작업을 하다 보면 의미 없는 텍스트를 넣어야 하는 경우가 있다. 직접 타이핑하는 건 번거롭고 인터넷에 찾는 것도 귀찮을 때 아래의 방법을 알고 있으면 아주 편리하다. 1. 텍스트 에디터에서 바로 생성하기 방법 1 ) lorem 입력하고 tab 또는 엔터를 누르면 텍스트 한 단락이 생성된다. 방법 2 ) lorem단어수 입력하고 tab 또는 엔터를 누르면 단어 수만큼 텍스트가 생성된다 방법 3 ) lorem*단락수 입력하고 tab 또는 엔터를 누르면 단락 수만큼 텍스트가 생성된다. 2. Lorem Ipsum사이트에서 복사해 사용하기 * 사이트명을 클릭하면 해당 페이지로 이동합니다. Lorem Ipsum사이트로 접속해서 우측 하단에 paragraphs(단락) / words(단어) / bytes(바이트) / .. 2022. 9. 7.
word-break 으로 문장 줄바꿈 하기 1. word-break? 문장 줄바꿈에 사용되는 속성으로 단어 또는 글자 단위로 줄바꿈 할 수 있다. 2. word-break 속성 [word-break: normal] 기본값으로 한글, 한자, 일본어는 글자 단위로 줄바꿈 되고 영어는 단어 단위로 줄 바꿈 된다. [word-break: break-all] 글자 단위로 강제 줄바꿈 된다. [word-break: keep-all] 단어 단위로 강제 줄바꿈 된다. 3. 적용 예시 word-break: break-all은 글자 단위로 줄바꿈이 되기 때문에 텍스트 박스 영역을 최대한 채울 수 있어 많은 내용을 넣어야 할 경우에 사용하면 좋을 것 같고 word-break: keep-all은 단어 단위로 줄바꿈이 되기 때문에 텍스트를 읽기 편하다. 그래서 가독성을.. 2022. 9. 7.
border 알아보기 1. border? border은 테두리에 효과를 주는 것으로 선 두께, 스타일, 색상을 지정할 수 있다. CSS에는 { border: border-width(선 두께) border-style(선 스타일) border-color(선 색상) } 순으로 넣어 사용하면 된다. 2. border 속성 [border-width(선 두께)] medium / thick / thin / length / px 값을 넣어 선 두께를 나타낸다. [border-style(선 스타일)] solid(실선) / dotted(점선) / dashed(짧은 선) / double(이중 실선) / groove / ridge / inset / outset / none / hidden 값을 넣어 선 스타일을 나타낸다. 3. 적용 예제 2022. 9. 6.
display: none 과 visibility:hidden 공통점, 차이점 display: none과 visibility:hidden 비교 display: none과 visibility:hidden은 요소를 보이지 않게 만드는 공통점이 있다. 하지만 이 두 속성에는 큰 차이점이 있는데 display: none의 경우는 공간 차지 없이 눈에 보이지 않게 되는 것이고, visibility:hidden은 눈에 보이지는 않지만 공간은 차지한다는 점이다. [display: none] 위의 이미지는 display: none의 적용 전, 후를 나타낸 것으로 2번 박스에 display: none를 적용했을 경우 2번 박스의 이미지도 사라지고 공간도 사라져 밑에 있던 3번 박스가 2번 박스 자리를 차지하게 된다. [visibility:hidden] 위의 이미지는 visibility:hidden.. 2022. 9. 6.

티스토리툴바