HTML로 웹페이지를 만들다 보면 반응형으로 웹을 만들어야 겠다는 생각을 하게 됩니다. 일반적으로 반응형 웹을 고려하고 만들지 않으면 제작한 디바이스가 아닌 다른 디바이스로 들어갔을때 UI 요소들이 이상한 곳에 가있거나 글씨가 깨지게 깨져 있기 때문입니다. *반응형 웹은 ? 디바이스의 창의 크기에 따라 알아서 요소들이 유기적으로 배치되는 사이트를 의미 이를 해결하기 위한 방법으로는 3단계로 1.html - 특정 meta 태그 삽입하기 2.폰트 사이즈 px 대신 em 이나 rem사용하기 3.css - 미디어 쿼리 사용하기 가 있습니다. 1.html - 특정 meta 태그 삽입하기 위와 같이 head 태그 안에 저 meta 태그를 삽입해주면 됩니다. 해당 내용을 자세히 설명해드리자면 viewport는 웹 페..

위 사진처럼 html과 css를 이용해 원을 만들고 글자,이미지를 원 위에 배치하고 싶으신가요..? 저도 처음 웹페이지를 제작 하며 자초지종 다 겪어가며 성공했는데요 ㅠㅠㅠ 정답이 아닐 수도 있습니다만 html과 css로 제가 완성시킨 방법을 알려드릴게요 1) 원 만들기 첫번째로 우리는 원을 만들어 줘야 합니다. HTML에서 태그를 만들어주세요 그 다음으로는 css에서 꾸며주면 돼요 이 때 중요한것은 position !! 꼭 relative 여야 해요 div{ background-color: antiquewhite; border-radius: 50%; width: 24%; padding-bottom: 24%; position: relative; } 자세히 설명 드리자면 해당 css에서 -윗 부분 코드는 ..

figure 태그를 배우며 헷갈렸던게 왜 img가 있는데 또 figure태그를 사용하는가 였다 figure의 뜻은 '이미지'로 태그는 그림이나 영상등의 요소를 넣고 감싸는데 사용된다. 즉 figure 태그 안에 img가 들어갈 수 있는 것으로 figure태그 자체만으로는 이미지를 불러올 수는 없었다. 이미지 불러오기 -> img 이미지 감싸기 -> figure 그렇다면 이미지를 감싸서 어디다 사용할 수 있을까? 그건 바로 기사나 논문등을 보면 이미지 하단에 뭔가 글이 길다랗고 조그맣게 적혀있는 것을 볼 수 있다. 그 안에 대체로 이미지의 제목이나 출처가 적혀있는데 그것을 구분해 주기 위해 바로 이 키워드가 존재한다! (참고로 figure 태그는 시멘틱 태그로 의미가 있는 태그이다.)

html을 배우다 보면 css 파일을 사용할 때 부분에서 link를 사용해 파일을 연결한다. 이 때 우리는 단순히 link만 사용하는게 아니라 rel과 href을 사용하는데 rel은 relation의 약자로 '관계'를 의미한다. 즉 어떠한 파일을 연결할때 이 파일과 현재 파일의 관계를 정의하는 것이다 그래서 = 다음에 불러올 파일을 현파일과 어떤 관계로 정의할 것인지 쓴다. (예시 사진에서 rel은 stylesheet 즉 style.css가 스타일을 담당함을 의미한다) href은 hyper reference의 약자로 '하이퍼 참조'를 의미한다. 이름만 보았을때는 어렵게 느껴질 수 있는데 굉장히 쉬운 개념으로 참조할 하이퍼*(=하이퍼링크를 떠올려보자)을 의미한다 그래서 = 다음에는 참조할 파일명을 이 다음..