Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

CSS 13

CSS의 Width사이즈 계산 방식을 달리 해보자~ | box-sizing

퍼블리싱하실 때 Div 나 li 등의 태그 사이즈 지정해 줄 때 어떻게 하시나요? 저는 box-sizing을 알기 전에는 상당히 복잡하게 했던거 같아요 디자이너가 넘겨준 전체 사이즈에서 border 사이즈 빼고 padding 넣어줄 사이즈 빼고 남은 사이즈를 width로 넣어줬는데요. 다들 그렇게 하셨나요? 물론 디자인 파일을 받아서 작업을 하다 보니 그렇게 계산해서 작업을 한 거고 content-box 방식의 나름 장점도 있겠죠^^ width영역의 사이즈를 고정해서 주고 싶다거나 할때 말이죠 자 여기서 잠깐!! 중간 중간 box-sizing, content-box 이런 말들이 나왔는데 이게 뭐죠? 이게 바로 오늘 알아볼 CSS의 box-sizing이고요~ content-box는 box-sizing의 속..

Web/CSS 2021.09.17

반응형 폰트 사이즈 단위 em? rem? 뭐가 다를까? | css font-size 상대 단위

오늘은 반응형 사이트 제작할 때 많이 쓰는 size 단위인 em, rem에 대해서 알아보도록 하겠습니다. 보통 폰트사이즈를 12px 요렇게 고정 크기 픽셀 단위로 설정하지만 em과 rem은 배율이라고 보시면 되요 1.2em 1.2rem은 1.2배라고 보시면 되요~ 근데 배율이면 기준이 있어야하자나요? 도대체 어떤 요소의 1.2배란 말일까요? 여기서 em과 rem은 서로 다른 길을 갑니다. em은 상위 요소(부모)가 기준이 되구요 rem은 최상위 요소가 기준이 됩니다. rem의 뜻은 최상위를 뜻하는 root의 r을 붙여줘서 r + em이 된답니다. 상위? 최상위? 상위와 최상위의 차이가 어떻게 다른지는 예제를 통해서 한번 알아보도록 하겠습니다. EM의 글자크기 REM의 글자크기 위 코드를 실행하게 되면 다..

Web/CSS 2021.08.30

반응형 사이트 사이즈 계산에는 CSS의 calc()가 최고죠!!

요즘은 반응형으로 사이트 제작을 많이 하는데요 반응형 사이트를 제작할 때 아주 애먹는 부분이 있죠.... 바로 사이즈를 어떻게 잡느냐입니다. 보통 가변 사이즈로 설정해야 해서 % 나 em, rem으로 사이즈를 지정해 주지만 특정 영역만 고정 사이즈로 해줘야 할 때가 있습니다. 그럴 땐 정말 머리가 지끈..... 무슨 말인지 이해가 안 되시는 분들을 위해 샘플 코드와 이미지로 준비했습니다. 컨텐츠 영역 컨텐츠 영역 이렇게 왼쪽에 이미지 사이즈를 고정으로 해주고 싶을 때 %로 사이즈를 줬을 때 Width 사이즈에 따라 왼쪽 이미지 영역에 여백이 생겼다 없어졌다 하는 걸 보실 수 있습니다. 그래서 이미지 영역은 px로 고정을 해줘야 하는데 그럼 콘텐츠 영역에 % 사이즈를 주기가 애매해져요~ 저는 이러한 경우에..

Web/CSS 2021.08.24

ALT 속성이 필요한 이유!! | ALT 속성 없는 이미지 태그 쉽게 찾기

ALT 속성이 없는 이미지 태그를 쉽게 찾는 방법을 알아볼 건데요~ 잠깐! 도대체 왜 찾아야 하는 거죠?? 귀찮게.... 하지만 ALT 속성은 - 시각장애인을 위한 웹 접근성에 굉장히 필요합니다. - SEO에 영향을 줍니다. - 일시적인 오류로 이미지가 표시 안될 때 이미지 대신 ALT 속성 값이 표시돼요. 그렇기 때문에 최대한 넣어줄 수 있는 부분은 넣어주는 게 좋아요! 1. 시각장애인을 위한 웹 접근성에 굉장히 필요합니다. HTML 웹페이지를 만드는 데 있어 시각장애인을 위한 배려는 반드시 필요합니다. 시각장애인은 음성인식기를 컴퓨터에 장착을 하고 사용하는데 이 음성인식기를 사용하면 웹사이트의 모든 내용을 음성으로 들을 수 있습니다. 만약 시각 장애인이 어떠한 이미지를 클릭한다면 이미지를 설명해주는 ..

Web/CSS 2021.08.24

배경만 반투명하게 할 때 opacity?? rgba??

HTML코딩을 하다보면 배경을 반투명 하게 해야 할 경우가 생깁니다. 흔히 많이 사용하시는 방법이 CSS의 opacity를 이용해서 투명도를 설정해주시죠? Opacity는 해당 객체의 투명도를 설정할 수 있으며 0 부터 1 까지 소수점으로 설정합니다. 예를 들어 투명도를 50% 정도 주고 싶다 한다면 opacity:0.5; 라고 사용하시면 됩니다. 하지만 opacity를 사용해서 할 경우 아주 환장하는 문제가 생깁니다. 바로 자식요소까지 모두 투명도를 설정해버리는 문제가 있습니다. 나는 제목 로고 주저리 주저리 설명해 보아요 나는 제목 로고 주저리 주저리 설명해 보아요 만약에 위와 같은 코드를 실행 했을 때 결과를 확인해 보면 다음과 같습니다. 그림에서 보시는것과 같이 div#opacity_test 안에..

Web/CSS 2021.06.12

CSS의 선택자_세번째 | 속성선택자_가상클래스

안녕하세요 웹아이 입니다.!! CSS의 선택자 중에 가상클래스에 대해서 알아보겠습니다. 가상클래스는 '슈도클래스'라고도 합니다.웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 지정하여 사용하는 것을 말합니다. :link 선택자문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용할 때 사용합니다.텍스트 링크는 기본으로 파란색 글씨와 밑줄로 표시되는데, 링크의 밑줄을 없애거나 글자의 색상을 바꿀 때 사용합니다. a:link { color:black; text-decoration:none; } A 태그로 링크를 건 부분 중 텍스트 링크를 밑줄 없이 검은색으로 적용합니다. :visited 선택자문서 안의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용할 때 사용합니다..

Web/CSS 2018.07.21

CSS의 선택자_두번째 | 속성선택자

안녕하세요 웹아이입니다. 속성선택자태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정할 수 있습니다. [속성] 형식지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용합니다. 선택자 속성 선택자 가상클래스 선택자 선택자· 속성 선택자· 가상클래스 선택자 A 태그 중 href라는 속성이 있는 요소를 찾아내 거기에 배경색을 노란색으로 적용합니다. [속성 = 값] 형식주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용합니다. 선택자 속성 선택자 가상클래스 선택자 선택자· 속성 선택자· 가상클래스 선택자 A 태그 중에서 target=“_blank”인 링크, 새 탭으로 열리는 링크에 배경색을 노란색으로 적용합니다. [속성 ~= 값] 형식[속성=값] 과 다르게 비교할 값이 여러 개일 경우, 그 중 하나만 일..

Web/CSS 2018.07.16

CSS의 선택자_첫번째 | 태그를 선택해서 CSS 입히기

안녕하세요 웹아이입니다. CSS의 선택자(Selector)선택자 { 속성:값 } h2 { color:red; } 여기서 선택자는 h2가 되겠죠속성이 어디에 적용되는지 표시한다고 해서 '선택자'라고 합니다.!! 전체 선택자 (Universal Selector)모든 요소에 스타일을 적용할 때 전체선택자를 사용합니다.별표(*)를 사용합니다. * { margin:0; padding:0; } 태그 선택자 (Tag Selector)특정 태그에 스타일을 적용할 때 사용합니다. p { font-size:12px; font-family:"돋움"; } P 태그 내부에 있는 텍스트에글꼴 사이즈를 12px, 글꼴 모양을 돋움으로 적용하라는 의미 입니다. 클래스 선택자 (Class Selector)특정부분에 스타일을 적용할 때..

Web/CSS 2018.07.14

CSS의 기초_세번째(CSS 적용 우선순위)

안녕하세요!웹아이 입니다~ 스타일의 적용 우선순위에 대해서 알아보겠습니다.스타일의 우선순위는단계적으로 우선순위가 정해집니다. 예를 들면 스타일은 단계적으로 적용됩니다. 이렇게 하면,p태그의 글자는 blue 색상으로 적용이 됩니다. 스타일은 단계적으로 적용됩니다. 나중에 쓴 스타일이 적용되는거죠! 하지만 예외가 있습니다.!important이걸 써주게 되면 상황이 바뀝니다. !important 를 써준 스타일이 우선 적용 됩니다. 스타일은 단계적으로 적용됩니다. 이렇게 작성해주면,p태그의 글자는 red가 우선순위로 적용이 됩니다. 스타일은 단계적으로 적용됩니다. 그리고 !important 보다도 우선순위로 적용할수 있는방법이 있습니다.그건..바로 스타일은 단계적으로 적용됩니다. 태그 안에 직접 넣어주는 것이..

Web/CSS 2018.07.11

CSS의 기초_두번째 (CSS 어디에 쓰지?)

안녕하세요.웹아이입니다 :D 스타일의 기본형태선택자 {속성:값} p {color:blue;} 여기서 보면p가 선택자(selector) / color가 속성(attribute) / blue가 속성값(value)이 되는것입니다.쉽게 말해 p를 선택해서 color속성에 blue값을 줘라!! 가 되는거에요 한가지 선택자에 여러가지 속성을 적용할 경우, h2 { font-size:20px; color:purple; } 위와 같이세미콜론(;)으로 구분하여 나열하면 되요~ 그러면 스타일정보를 어디에 기록해두나요?스타일은 내부스타일시트와 외부스타일시트로 사용할 수 있습니다.(물론 지난 시간에 말씀드렸듯이 태그 안에 직접 사용도 가능하지만 권장하지 않습니다. ) 내부스타일시트문서안에서 head안에 써 넣는 것입니다. (..

Web/CSS 2018.07.06