Webi Blog

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

분류 전체보기 62

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

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

Web/CSS 2021.08.24

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

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

Web/CSS 2021.08.24

파비콘(ico 파일) 홈페이지에 적용하기 | HTML LINK 태그

오늘은 파비콘을 홈페이지에 적용하는 방법에 대해서 알아보겠습니다. 파비콘이 뭔지 모르신다고요??? 파비콘은 즐겨찾기(favorites)와 아이콘(icon)의 합성어로 주소창이나 즐겨찾기에 표시되는 작은 아이콘이에요! 파비콘이 뭔지 아셨다면 필요한 파일도 만드실 겸 해서 아래 링크로 한번 다녀오시면 될 거 같습니다.^^ 2018.07.03 - [Web/Design] - 파비콘 만드는 법 | 이미지 파일을 ico 파일로 변환 방법 파비콘 만드는 법 | 이미지 파일을 ico 파일로 변환 방법 안녕하세요 웹아이_디혜입니다:D 파비콘?? 파비콘이 뭔지도 몰랐던 저... 그런데 이제 파비콘 만드는 법까지 포스팅하는 날이 오네요 파비콘은요 조기 보이시는거 저겁니다..ㅋㅋㅋ 만드는 방 blog.webi.kr 혹시라도 ..

Web/HTML 2021.08.23

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

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

Web/CSS 2021.06.12

맥에서 웹서버를 운영하자 | MAMP 설치하기

맥에서 MAMP 설치하기 영상을 드디어 촬영하였습니다. 혹시나 윈도우 사용중이신데 여기로 잘못 오셨다면 아래 링크로 가보시면 됩니다.^^ http://blog.webi.kr/4 지난번에는 윈도우에서 로컬서버를 구성할 수 있는 WAMP를 설치해봤는데요... 이번에는 맥에서 로컬서버를 구성할 수 있는 "MAMP"를 설치해보겠습니다~~ 이름이 정말 직관적이네요...ㅎㅎㅎ Window + Apache + Mysql + PHP = WAMP Mac + Apache + Mysql + PHP = MAMP WAMP 영상 찍을때는 처음 찍어본거라서 완전 이상했는데.... 이번에는 편집에도 조금 신경을 써서 덜 이상하답니다.ㅎㅎㅎ 아래 영상으로 확인해보세요^^ 잘보셨나요? 공부를 하기 위해 굳이 호스팅 구매하지 마시구요 W..

Server 2018.08.25

카카오톡 링크 공유 시 표시되는 이미지 및 정보 수정하기

여러분들 카카오톡에 링크 공유할 때 공유하는 사이트의 정보가 나오는 거 한 번쯤 보셨죠?? 요즘은 친구들과 링크를 공유하는 일이 꽤나 많이 있는 거 같아요~ 공유하는 링크의 사이트가 섬네일도 안 뜨고 이상하게 뜨고 그러면... 왠지 사이트의 신뢰가 팍팍 떨어지지 않나요?? 그래서 이번에 내가 운영하는 홈페이지의 링크를 카카오톡으로 보냈을 때 나오는 썸네일, 정보를 수정하는 방법을 알려드릴께요!! 생각보다 어렵진 않아요.. 다른 SNS과 마찬가지로 카카오톡은 메타 태그 정보를 가져가서 보여주기 때문에 우리는 메타태그를 넣어주면 되요~ 매타 태그를 넣어주실 때에는 태그 사이에 넣어주시면 됩니다. 태그 사이에 넣기 싫으신 분은 안넣으셔도 되지만....반드시 태그 앞에 있어야 합니다.^^ 위와 같은 태그들이 사..

Web/HTML 2018.08.20

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

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

Web/CSS 2018.07.21

PHP 등급 출력 도와주세요! | 다중 if문을 이용한 등급 출력!

Q.0-100 사이 점수를 하나 입력받는 변수를 설정하고 입력된 값이 조건에 해당하면 등급을 출력다중 if문 사용 등급과 점수 함께 출력 하다가 잘 안되서ㅠ 도와주세요. A.해당 문제는 다중 if문으로 해결 가능합니다.^^ 다중 if문은 if(조건1){ 조건1 True }else if(조건2){ 조건2 True }else if(조건3){ 조건3 True }else{ 모든 조건 False } 위와 같은 방식으로 사용하실 수 있습니다.갯수는 상관없이 필요한 만큼 늘리실 수 있습니다. 맨 위의 조건부터 체크를 해서 조건이 맞는 곳에서 실행을 하고 뒤의 조건문은 무시가 된 채로 멈추게 됩니다. 예를 들어 if($a > 95){ 조건1 실행 }else if($a > 80){ 조건2 실행 }else if($a > ..

Kin 2018.07.16

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

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

Web/CSS 2018.07.16

PHP 출력 도와주세요! | For문 중첩을 이용한 줄바꿈

Q.저렇게 일자로 나오는 출력을 밑에 사진처럼 줄바꿈 해서 나오게 도와주세요 A.안녕하세요. 웹아이입니다.저 문제를 해결하기 위해서 공통되는 조건을 찾아야 합니다.0-0, 0-1, 0-2...이렇게 출력이 되고 있고앞에 숫자가 $i변수이고 뒤에 숫자가 $j 변수 입니다.출력되야 하는 정답을 보면 뒤에 숫자가 5일때 한줄 내려서 처리 하라는 조건을 알 수 있습니다.뒤에 숫자는 $j 변수에 담겨져 있고 한줄 내려서 엔터 처리하는건 태그 입니다.그리고 해당 조건을 처리할 수 있게 해주는게 if문 입니다. if(조건){ 조건이 맞을 때 실행 }else{ 조건이 틀릴 때 실행 } 이러한 것들을 조합해서 수정을 해본다면... 저렇게 if문을 중간에 추가 해줌으로써 해결 할 수 있을것 같습니다.^^

Kin 2018.07.14