컴공생의 다이어리

CSS 선언방식 CSS를 작성하고 HTML문서에 포함시키는 방식은 크게 내장방식, 인라인 방식, 링크방식, @import 방식이 있다. 내장방식 내장방식은 HTML 파일 안에 인라인 방식 요소의 style 속성에 직접 스타일을 작성하는 방식이다. 유지보수의 측면에서 어려움이 있기 때문에 권장하지 않는 방식이다. ... 링크방식 link 태그를 이용하여 외부 css 문서를 가져와서 연결하는 방식이다. @import 방식 css의 @import 규칙으로 css문서 안에서 또 다른 문서를 가져와 연결하는 방식이다. @import url("./box.css"); div { color : red; margin : 20px; } .box { background-color: red; padding: 20px; } h..

CSS 선택자 - 전체 선택자, 태그 선택자, 클래스 선택자, id 선택자 선택자(Selector)는 딱딱한 html에 스타일을 넣어줄 때 기준이 되는 기호라고 할 수 있다. 전체 선택자 전체 선택자는 모든 요소들에 동일한 효과를 줄 때 사용하는 선택자이다. * { color : red; } 만일, h2 태그 밑의 모든 요소에 같은 속성을 부여하고 싶다면 아래와 같이 CSS를 작성하면 된다. *h2 { color : red; } 태그(tag) 선택자 태그 선택자는 html의 태그 이름을 사용하여 나타내는 선택자이다. 태그명이 선택자와 같은 태그들에 대하여 적용한다. p { color : red; } 클래스(class) 선택자 클래스 선택자는 .클래스이름을 사용하여 나타내는 선택자이다. 클래스가 클래스이름..

CSS 테두리(border) 없애기 input이나 button 태그의 경우 border:none;을 사용하면 테두리를 없앨 수 있다. input, button{ border:none; } https://solbel.tistory.com/1722

CSS 배경색(background-color) 투명 or 없애기 배경색을 없애고 투명하게 만들고 싶다면 transparent를 사용해주면 된다. background-color:transparent; https://www.codingfactory.net/10588 CSS / background-color / 배경색을 정하는 속성 개요 background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 b www.codingfactory.net

입력값이 보이지 않을 때 input type을 password로 지정해 비밀번호를 받으려고 하니 기호(●)없이 입력되는 문제가 발생했다. 이런 현상이 발생하는 이유는 나눔스퀘어 폰트를 사용하고 있었기 때문이다. 물론 다른 폰트를 사용해도 이와 같은 문제가 발생할 수 있다. 이런 문제가 발생하는 폰트에는 ● 문자를 지원하지 않아서이다. 해결방법 아래와 같은 형식으로 css 코드를 추가해주면 된다. input[type=password]안에는 ● 문자를 지원하는 폰트를 넣으면 된다. 아래 코드에는 구글 폰트를 넣어놨는데 언제까지 될지는 모르겠지만 저대로 써도 아마 작동할 것이다. input[type=password]::placeholder를 사용하지 않아도 되지만 기존에 사용하던 글씨체와 통일성을 주기 위해서..

(VS Code를 기준) 들여쓰기 들여쓰기를 할 영역을 드래그 하고 [Tab]을 눌러주면 된다. 내어쓰기 내어쓰기를 할 영역을 드래그 하고 [Shift+Tab]을 눌러주면 된다. 여러코드 주석지정/해제 주석지정을 하거나 해제를 하고 싶은 영역을 드래그 하고 [ctrl+/]를 눌러주면 된다. dasima.xyz/html-comments/ HTML 주석 처리 예제 및 디버깅과 단축키 | TIMECRAFT HTML 주석 처리는 한줄과 여러줄 동일하게 부등호, 느낌표, 하이픈 기호 조합으로 구성됩니다. 주석으로 디버깅 효과를 흉내낼 수도 있습니다. atom, visual studio, codpen 등에서 주석 단축키도 존재합 dasima.xyz

goorm(구름) ide로 html/css/js 실습환경 만들기 우선 구름 ide를 짧게 소개해보자면 프로그램 설치 과정 없이 컨테이너를 생성하는 것으로 개발환경을 자동 구축하는 클라우드 iDE이다. 이제 구름 ide에서 html/css/js 실습환경을 만들어보자! 1. 구름 ide에 접속 후 로그인 진행(회원이 아니라면 회원가입을 해야함) 2. 로그인을 하면 다음과 같은 화면이 나타나는데 여기서 새 컨테이너 생성을 클릭 (혹시 위의 화면이 바로 나오지 않는다면 구름 ide에서 대시보드를 클릭) 3. 아래와 같이 기본 설정(필요한 부분은 각자 설정에 맞게 변경)을 한 뒤 생성 버튼 클릭 4. 바로 생성한 컨테이너를 실행하고 싶다면 컨테이너 실행을 클릭 5. index.html을 클릭하고 Open Prev..

웹사이트는 크게 아래와 같이 3가지 요소(HTML, CSS, JS)로 구성된다. HTML(Hyper Text Markup Language) 하이퍼 텍스트 마크업 언어 하이퍼 텍스트 : 참조(하이퍼링크)를 통해 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 마크업 언어 : 문서의 구조를 표현하는 역할 웹페이지를 만들기 위하여 사용하는 언어 웹페이지에서 제목, 이미지, 동영상, 문단, 표, 등을 정의하고 그 구조와 의미를 부여하는 정적 언어 웹의 구조를 담당 CSS(Cascading Style Sheets) 캐스캐이딩 스타일 시트 캐스캐이딩 : '계단식, 위에서 아래로 흐르는'을 의미 스타일 시트 : 글꼴의 크기, 모양, 컬러, 문단 설정 등 미리 정의해 스타일로 만들었다가 웹 문서의 본문에서 그 스..