안녕하세요! 지금부터 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. 구동하기 원하는 파일 위 오른 쪽 마우스 클릭 후 크롬으로 실행하기 위..
IT 관련 블로그로 키워보기 위해!!! 네이버에서 그동안 주제 짬뽕으로 올렸던 글 중 IT 관련 글만 정리해 재업로드 해보려 합니다. 과거를 회상하며, 또한 리마인드를 해보면서 다시 수정해보겠습니다 ㅎㅎ 그 중 가장 열심히 활동했던 멋쟁이사자처럼 8기 활동을 차차 올려보도록 할게요! (왜 과거 포스팅을 보는 데 오글거릴까요 ㅎㅎ) 안녕하세요 멋쟁이사자처럼 8기 산와머니입니다. 혼자서 공부하면 딴 곳으로 셀까봐 공부기록을 블로그에 기록하려합니다 *^^* 먼저 어떤 활동을 했는지 간략한 소개와 vs Code를 어떻게 셋팅하는지 배운 것에 대한 글을 쓰려고 합니다. 보시면서 많은 궁금증 또는 많은 가르침부탁드립니다! 그럼 시작해볼까요! Q. 지금까지의 일정? 먼저 간략하게 지금까지의 활동을 기록..
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"; } '안녕'과 '나는 산와머니라고 해!'라는 텍스트에 다른 효과를 주고 싶어도 주지 ..
안녕하세요 산와머니 입니다. 부끄럽게도 오랜만에 인사드리네요. 그동안 영상만 보고 정리할 엄두가 안났던 CSS 파트! 오늘 7~9일차 빡공일지를 정리해보려합니다. 1) 7강 CSS 색상 입히는 법 1-1) 내부 css + 글자색과 배경색 바꾸는 법 head태그 안에 style태그를 지정하여 내부에 CSS를 입힐 수 있습니다. 주로 글자색과 배경색에 변화를 주고 싶을 때 사용하는 데, 글자색은 color : red ; 배경색은 background-color : red ; 이런 식으로 적용합니다. div span 1-2) 외부 css 연동시키는 방법 head에 style태그 대신에 link 태그를 이용해 외부 css시트를 연결합니다. 그리고 연결한 css에 디자인을 적용시킵니다. 그럼 동일한 결과가 나오는 ..
웹페이지에 이미지를 삽입하거나 영상을 삽입할 수 있도록 도움주는 태그들은 미디어태그라고 합니다. 이 점들에 대하여 오늘의 빡공 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나 인라인, 블록 등의 요소들을..
4일차 빡공일기를 시작합니다! 오늘은 텍스트에 관련한 태그들과 회원가입에 들어갈 법한 태그들을 배웠습니다. 1) html은 기본적으로 띄어쓰기가 되지 않고 가로로 다닥다닥 붙는데요. 태그는 띄어쓰기를 도와주는 태그이기 때문에 요소들을 분리시킬 수 있습니다. hello br태그 2) 텍스트를 강조하는 법 텍스트를 두껍게 강조하거나 이탤리체로 강조하는 등 다양한 글씨체를 구사할 수 있는데요. : 글씨체 두껍게 설정 : 볼트체와 똑같이 반영하나 태그에 의미를 부여하는 시맨틱 태그 : 이탤릭체 hello1 hello2 i tag 3) 입력창과 버튼 웹에 꼭 들어가는 요소인 입력받을 수 있는 공간과 버튼은 아래와 같이 표현한다. 난 버튼이야! 특히 input 태그와 같은 경우는 정말 많은 type에 따라 형태가 ..
