죽이죽이

Internal 방식 ※ 특징 - 하나의 HTML 파일 안에 있는 태그 내에 CSS 코드가 포함되어 있어 해당 문서에만 스타일이 적용되는 방식이다. ※ 예시 External 방식 ※ 특징 - 스타일을 지정한 CSS 코드가 별도의 외부 파일로 저장되어 있어서 태그를 통해 가지고 오는 방식이다. ※ 예시 Inline 방식 ※ 특징 - 각 HTML 태그 내부 style 속성에 스타일을 정의하여 해당 태그에만 스타일을 적용시키는 방식이다. ※ 예시 적용 우선순위 ※ 우선순위 - !important : 어디서든지 사용가능 (최우선 적용) - 인라인 : HTML 태그 내에 작성 - 아이디 : 아이디 선택자(#)를 사용해서 작성 - 클래스 : 클래스 선택자(.)를 사용해서 작성 - 태그 : 태그 자체를 선택해서 작성..

참고하기 좋은 사이트 ※ MDN - https://developer.mozilla.org/ko/docs/Web/HTML/Element ※ TCP School - https://tcpschool.com/html-tags/intro Block 요소 (HTML5 기준) ※ 특징 - 태그가 한 라인 전체 공간을 차지하기때문에 좌우에 다른 태그들을 배치할 수 없다. - 높이, 너비를 지정할 수 있다. - 전체적인 틀을 잡을때 주로 사용된다. - 내부에 block, inline 요소 모두 허용한다. ※ 종류 및 설명 address 문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시할 때 사용 article 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용 aside..

Visual Studio Code ※ 사용하는 이유 - 개발하는데 필요한 Tool(IDE)로 코드 작성 시에 필요하다. ※ 공식 홈페이지 - https://code.visualstudio.com/ ※ 설치 - 본인 OS에 맞는 버전을 선택하면 된다. - Stable : 안정성이 높고 품질이 검증된 버전이다. (추천) - Insiders : 최신 기능이나 업데이트를 제공한다. Cmder (윈도우 사용 시 추천) - 선택사항 ※ 사용하는 이유 - Git, Unix 커맨드 명령어가 같이 포함되어 있어서 사용하기 편리하다. ※ 공식 홈페이지 - https://cmder.app/ ※ 설치 - Download Full : 다양한 기능 및 옵션을 포함하고 있다. (Git 포함) - Download Mini : 경량화..

배포할 테스트용 프로젝트 생성 ※ 테스트용 index.html, style.css 생성 React 프로젝트일 경우에만 해당 ※ 특정 하위 경로에 배포가 필요할 경우 (http://mywebsite.com/하위 경로) ※ 빌드 - 터미널에 npm run build 명령 입력 ※ 추후에 GitHub 연결 후 push할 때 build 폴더 내부의 파일들만 업로드 GitHub에서 Repository 생성 ※ 공식 홈페이지 (GitHub) - https://github.com/ ※ New 클릭 ※ Repository 생성 - 처음 배포 시 Repository 이름 : 내 아이디.github.io (DanielSon93.github.io) ※ Repository 주소 확인 테스트용 프로젝트에서 Git 초기화 및 G..

반응형 웹 (Responsive Web) ※ 사용하는 이유 - 웹 페이지의 크기를 사용자의 디바이스 화면 크기에 자동으로 조정하여, 사용자가 어떤 디바이스를 사용하더라도 일관된 화면과 기능을 제공할 필요가 있을때 사용한다. ※ 공식 홈페이지 (mdn) - https://developer.mozilla.org/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries ※ 기본 사용법 @media screen and (조건) { 선택자 { 적용할 CSS } } @media only screen and (max-width: 600px) { body { background-color: lightblue; } }

transition ※ 사용하는 이유 - 특정 요소에 부드러운 애니메이션 효과를 주기위해 사용한다. ※ 특징 - hover, onclick과 같은 이벤트에 의해 동작한다. ※ 공식 홈페이지 (mdn) - https://developer.mozilla.org/ko/docs/Web/CSS/transition ※ 기본 사용법 transition: property | duration | timing-function | delay; - property : 어떤 CSS 속성(width, height 등)에 애니메이션을 부여할지 지정한다. - duration : 몇초에 걸쳐 애니메이션 전환이 일어나게할지 지정한다. - timing-function : 애니메이션 전환 동안 시작과 끝 부분에 대한 속도를 조절하여 전체적..

BEM (Block__Element--Modifier) ※ BEM 이란 - Block : 전체를 감싸고 있는 블럭요소 - Element : 요소 (블럭이 포함하고 있는 한 조각) - Modifier : 블럭 또는 요소의 속성 ※ 사용하는 이유 - 목적이나 기능을 직관적으로 파악할 수 있다. - 구성요소의 구조를 알 수 있다. - 선택자 특이성을 낮은 수준으로 유지할 수 있다. ※ 주의 사항 - BEM은 기본적으로 ID에서는 사용되지 않으며, Class에서만 사용한다. - 최대한 모든 이름은 간단명료해야한다. ※ 예시

카멜 표기법 (camelCase, lowerCamelCase) ※ 사용 방법 - 모든 단어의 시작을 대문자로 작성한다. (처음 단어만 소문자) ※ 사용하는 곳 - Javascript : 변수, 함수 - Java : 변수, 함수 파스칼 표기법 (PascalCase, UpperCamelCase) ※ 사용 방법 - 모든 단어의 시작을 대문자로 작성한다. (처음 단어도 대문자) ※ 사용하는 곳 - Javascript : 클래스 - React : 함수형 컴포넌트, 클래스형 컴포넌트 - Java : 클래스 - Python : 클래스 스네이크 표기법 (snake_case) ※ 사용 방법 - 모든 단어를 소문자로 작성하고 단어 사이에 underscore(_)를 넣어서 구분한다. ※ 사용하는 곳 - Python : 함수..