대략적으로 JS가 어떻게 쓰이는지 확인해보고싶어서 드림코딩 엘리님의 프로젝트를 따라해보았다. 나중에 헤더만들 때 유용하게 쓰려고 기록해두려고 한다 ! 1. 사이트 정리 먼저, 이 프로젝트를 할 때 필요한 사이트들을 정리해보도록 하겠다. 1. Font Awesome https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 사용법은 start for free를 눌러 메일을 통해 인증을 하자. 인증을 완료하면 자신의 코드가 포함되어 있는 코드를 얻을 수 있다. ..
안녕하세요! 지금부터 HTML의 기초에 이어 CSS의 기초에 대해 끄적이며 공부해보려고 합니다. 지금부터 같이 공부해요!! 1. CSS 사용 형식 아래 종류 3가지를 소개하며 사용 방법을 보실 수 있겠지만 간단하게는 css를 적용하고 싶은 선택자를 골라주세요. 그 다음 선언부는 다음과 같이 사용합니다. 선택자{ 속성: 값; 속성: 값;} 땀표시(;)로 여러 속성에 css 값을 입혀 사용할 수 있습니다! 다음 그림은 html 안 테이블 li에 class이름을 select로 설정한 모습입니다. 만약 테이블 아래의 선을 제외한 모든 선을 지우고 싶다면 다음과 같이 css를 설정해 boder line을 없애줍니다! 그럼 결과는 다음과 같이 도출됩니다. 2. CSS의 종류 3가지 첫 번..
안녕하세요! 지금부터 멋쟁이사자처럼 8기 1주차(20.04.16) 스터디에서 배웠던 html을 간단히 공부하려고 합니다. 본격 나혼자 공부하면 딴짓할까봐 적는 블로그! 지금부터 시작합니다! 1. HTML 구조외우기 1-1. 자동완성 !를 써주신 후 ENTER를 눌러주시면 구조가 자동완성되는 것을 볼 수 있습니다. 1-2. But, 글쓴이 팀 운영진님께서는 꼭 외우는 것을 강추하셨기에 외워서 써봅니다. 타입 -> html태그 -> head태그->body태그 head 안에는 css & JS 요소가 들어갑니다. body 안에는 웹 페이지에 들어갈 컨텐츠 내용들이 들어갑니다. 2. 웹페이지 작동법 2-1. 구동하기 원하는 파일 위 오른 쪽 마우스 클릭 후 크롬으로 실행하기 위..
10강~11강을 요약해보도록 하겠습니다. 1) 만약 id나 class가 없다면? css로 오로지 태그 이름만 설정할 수 있다면 어떤 일이 일어날까요? 안녕 나는 산와머니라고 해! @font-face { font-family: "IM_Hyemin-Bold"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/IM_Hyemin-Bold.woff2") format("woff"); font-weight: normal; font-style: normal; } div { font-size: 50px; font-family: "IM_Hyemin-Bold"; } '안녕'과 '나는 산와머니라고 해!'라는 텍스트에 다른 효과를 주고 싶어도 주지 ..
웹페이지에 이미지를 삽입하거나 영상을 삽입할 수 있도록 도움주는 태그들은 미디어태그라고 합니다. 이 점들에 대하여 오늘의 빡공 6일차 일기를 시작합니다 ! 1) img 태그 다운받은 이미지 또는 가지고 있는 이미지를 프로젝트 폴더 안에 넣고 img 태그 안에 표시해줄 수 있습니다. 또한 다운받지 않고 '이미지 주소 복사하기'를 이용해 표현할 수 있습니다. 외부 서버에서 가져오는 방식인데, 프로젝트 용량이 커지는 것을 방지하기 때문에 실제로도 많이 쓰이는 방식입니다. 오늘의 단축키 팁! - ctrl + d를 누르면 커서 라인에 있는 문장을 그 아래에 그대로 추가해준다. 2) vedio 태그 우리가 가지고 있는 영상을 웹 페이지에 추가해주고 싶을 때 사용하는 태그입니다. 기본적으로 영상 맨 아래에는 영상의 ..
빡공일기 5일차로 오늘 하루를 마무리 합니다! 그럼 지금부터 시작! 1) div와 span의 차이 div와 span 태그는 모두 텍스트, 이미지 등 다양한 태그들을 안에 넣고 묶어줄 때 사용하는데요. 과연 이 태그들의 차이점은 무엇일지 아래 이미지를 보고 판단해봅시다. 1-1) div 태그 div 태그가 잡히는 영역은 화면 가로 영역 100%를 차지하고 있습니다. 이런 태그들을 블록 요소라고 합니다. 1-2) span 태그 span 태그가 잡히는 영역은 오로지 텍스트 등의 크기가 차지하는 영역으로 가로 한 줄 전체를 잡아먹지 않습니다. 이런 태그들을 인라인 요소라고 합니다. 2) 로그인 폼에 들어가는 요소들을 안정적인 구조로 만들기 사실상 로 한 줄을 띄는 것 보다는 css나 인라인, 블록 등의 요소들을..
