나뇽's 개발 일지

Auto Rename Tag : HTML 태그 수정 시 시작태그와 종료태그를 자동으로 함께 수정해주는 모듈 Code Spell Checker : 사전에 없거나 자주 사용되지 않는 단어가 사용되면 경고해주는 모듈 Error lens : 문제가 있는 부분을 직관적으로 알려주는 모듈 Live sever : html을 작성할 때 변경된 점을 바로 확일 할 수 있도록 도와주는 모듈

#1. position - static(정적 배치) : 브라우저의 디폴트 배치 방식. left, right, top, bottom 프로퍼티 값은 위피에 영향을 주지 않음 - relative(동적 배치) : 정적 배치(기본 위치)로부터 left, right, top, bottom 프로퍼티 값만큼 이동한 상대 위치 top과 bottom이 동시에 지정되면 bottom이 무시되고, left와 right가 동시에 지정되면 right가 무시된다. 상대 배치, relative T h a n k s - absolute(절대 배치) : 부모 태그로부터 left, right, top, bottom 프로퍼티 값만큼 이동한 절대 위치 절대 위치기 때문에 브라우저 크기가 변해도 태그 위치는 변하지 않는다 절대 배치, absol..

#1. text-align:left; 와 text-align:justify; 의 차이점 - left 요소는 왼쪽 가장자리에 맞춰져 있기 때문에 오른쪽에 공백이 생기는 반면, justify 요소는 왼쪽과 오른쪽 모두 맞춰져 있습니다. #2. text-indent(들여쓰기) - em은 배수이다(2em = 현재 폰트의 2배 크기) - in은 인치이다(1in = 2.54cm = 96px) #3. Font - Serif 형 : '삐침'이라는 뜻으로 글자의 끝에 삐침 선을 가진 폰트 - Sans 형 : '없다'라는 뜻으로 Sans-Serif 형은 삐침이 없는 폰트를 의미 - Monospace 형 : 삐침 여부와 상관없이 모든 글자의 폭이 동일한 폰트 - font-weight : 100~900 사이의 숫자로 글자의 ..

망나뇽 프론트 엔드 개발자 HTML + CSS + Javascript React node.js mySQL 졸업과제 나는 어떤 사람인가요? 이름 : 나이 : 생일 : 좋아하는 시간 : 좋아하는 색깔 : 좋아하는 포켓몬 : 좋아하는 음식 : 쌀국수 미역국 초밥 1. 펼치기 전 2. 펼친 후

시간이 지날때마다 명언이 바뀌게끔 설정 x 작심 추가하기 물주기 햇빛 영양제 추가 작심 하루 작심 Today 추가 자주쓰는 작심's 오늘의 명언 성공이란 넘어지는 횟수보다 한 번 더 일어서는 것이다. 오늘의 기분 😁 😐 🙁 😡 오늘의 점수 85점 오늘의 일기 위처럼 오늘의 명언 text 부분이 시간이 지나면 바뀐다.

https://hianna.tistory.com/724#t41 [HTML/CSS] div에 배경 이미지 넣기 총정리 (반복, 한번만, 가운데, 꽉차게) CSS를 사용하여 div에 배경 이미지를 넣는 방법입니다. 배경 이미지 넣기 (background-image) 배경 이미지 반복 횟수 지정하기 (background-repeat) background-repeat 속성 값 배경 이미지 반복 (repeat) 배경 이미지 hianna.tistory.com https://yejin0730.tistory.com/70 [CSS] 하단에 고정시키기 준비물은 하단에 고정시킬 태그(div, img 등)와 부모 div 방법은 간단하다. 아래와 같이 하면 된다. .parent{ position: relative; } .chi..

망나뇽 안녕하세요, 저는 프론트엔드 개발자가 되기 위해 열심히 공부중인 망나뇽 입니다.

#1. Transform - 웹 사이트의 특정 영역에서 어떤 오브젝트의 각도를 튼다거나 크기를 조절하거나 위치를 변경할 때 사용 - rotate(각도deg) : 입력한 각도만큼 (평면적)회전. 음수도 가능 - scale(width 값, height 값) : width 값, height 값 만큼 확대 (축소는 0.5와 같이 표현) - scew(x축 각도deg, y축 각도deg) : x축 y축을 기준으로 입력한 각도만큼 비틂. 음수도 가능 - translate(x축 값px, y축 값px) : 선택한 오브젝트의 좌표 변경. margin이나 padding 대신 최근에는 이걸 많이 사용 - prefix 접두사 : 다른 버전의 브라우저에서의 실행을 원할 경우 (∵ CSS3 최신 언어라서) #2. Transition..

#1. 크롬 개발자 도구 - 단축키 (F12) - Computed 탭 현재 요소 스타일이 더 보기 좋게 나옵니다. Group 체크박스를 클릭하면 한층 더 깔끔하게 스타일 속성을 확인할 수 있습니다. - Network 탭 현재 탭에 있는 웹 브라우저 네트워크 분석현황을 볼 수 있습니다. 서버로 부터 요청한 파일을이 어떤 순서대로 응답받는지 나오고, 해당 내용도 살펴볼 수 있습니다. 응답받은 파일을 종류별로도 확인할 수 있습니다. - Application 탭 스토리지와 쿠키를 확인해 볼 수 있습니다. 스토리지는 웹 브라우저가 프로토콜별(간단하게 웹주소)로 데이터를 저장할 수 있는 공간입니다. 쿠키는 서버에서 웹브라우저에게 전송하는 작은 데이터 조각입니다. #2. 웹을 구성하는 요소 - HTML(정보 또는 설..

#1. HTML이란? - 마크업 언어 (페이지에 게시할 콘텐츠에 추가로 주석을 더하기 위한 언어) - 웹페이지에 있는 다양한 콘텐츠에 각기 다른 의미를 부여 (텍스트, 링크, 이미지, 버튼 등) - 콘텐츠를 설명하는 역할 - 게시하고자 하는 콘텐츠, 구조 및 의미를 브라우저에게 전달 - HTML Element : 각 콘텐츠가 브라우저에 적절하게 표시될 수 있게끔 하는 역할 #2. HTML 요소 https://developer.mozilla.org/ko/docs/Web/HTML HTML: Hypertext Markup Language | MDN HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외..