Front-End/HTML & CSS
[SCSS] SCSS는 무엇인가?
SCSS CSS는 HMTL 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정이다. 하지만 프로젝트 규모가 커지거나 작업이 고도화될수록CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 된다코드의 재사용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS / SCSS라고 한다 CSS의 태생적 한계를 보완하기 위해 Sass는 유용한 도구들을 제공한다 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance 설치방법 npm i sass --save yarn add sass Sass와 SCSS 차이 Sass (Syntactically Awesome ..
[CSS] 가시 속성 & 위치 속성 & 배경 속성 (display & position)
가시 속성 가시 속성은 태그가 화면에 보이는 방식을 지정 ex) display display 속성을 이용하면 박스를 인라인 형식, 블록 형식, 인라인-블록 형식으로 설정할 수 있다 키워드 설명 none 화면에 보이지 않음 block 블록 박스 형식으로 지정 inline 인라인 박스 형식으로 지정 inline-block 블록과 인라인의 중간 형태로 지정 none 키워드 display 속성에 none 키워드를 적용하면 태그가 화면에서 보이지 X 중간에 있는 div 태그 전체가 화면에서 사라진다 block 키워드 속성을 block으로 지정하면 태그를 클릭하면 해당 요소가 선택된다 블록 형식과 인라인-블록 형식은 margin 속성과 padding 속성을 상하좌우 네 방향으로 지정할 수 있다 인라인 형식은 왼쪽과..
[CSS] 정의 & 특징 & 적용방법
정의 Cascading Style Sheet HTML과 함께 웹을 구성하는 기본 프로그래밍 요소 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당 웹 페이지에 다양한 스타일을 적용하므로 애플리케이션 페이지를 표시하는 프로세스를 단순하게 만들어주는 디자인 언어 css가 없으면 옷을 입지 않은 것과 같다 자바스크립트와 연계해 동적인 콘텐츠 표현이나 디자인 적용 가능 Cascading 의미 사전적 의미로는 폭포처럼 떨어져 내리는 상위 태그에서 정의된 디자인 속성은 하위 태그로 상속 하위 태그에서 상위 태그에 정의된 디자인 속성을 변경할 수 있음 동일한 디자인 속성이 외부,내부,인라인 스타일 시트에 적용 되어 있는 경우 우선순위는 가장 나중에 정의되는 스타일에 있다 정의된 세부적..
[HTML] 헷갈릴 수 있는 태크들!
i vs em 둘 다 이텔릭체로 폰트 타입을 변환 i : 시각적으로만 나타내고 싶을 때 em : 문장에서 정말 강조하고 싶은 부분이 있을 때i vs em b vs strong 둘 다 bold체로 보이지만 strong은 정말로 강조하고 싶을 때 ol vs ul vs li ol ordered list로 목록 순서가 중요하면 사용하는 태그 ol 속 li 태그 안에 또다른 ol 태그 사용가능 ul unordered list로 순서가 필요 없을 때 ul 안 li 태그 안에 또다른 ul 태그 가능, nestled loop처럼 dl description list로 단어에 대해 설명을 묶고 싶을 때 dt는 목록을 나타내는 단어 dd는 그 단어에 설명 img vs background-image img : html에서 사..
[HTML] Semantic Tags
Semantic Tag HTML5부터 등장하는 태그들이다 div에 class 값을 붙이면 모든 스타일링 작업이 가능하지만 어느 부분이 제목이고 바디인지 알 수가 없다 div에 class 붙여서 만드는 모든 구조와 파일은 현 상황에서는 하면 안 되는 일이다... 정의 semantic : 의미의, 의미가 있는 HTML 태그들 중에서도 나름의 의미가 있는 태그 들을 말한다 특징 SEO (Search Engine Optimization) 검색 엔진 최적화는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성하면 브러우저의 검색 엔진이 내가 만든 웹 사이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수 있다 웹 접근성 (Accessibility) 보통 사람들과 달리 웹 이용에 불편함..
[HTML] 정의 & 구조 & 특징들
정의 HyperText Markup Language HyperText : 웹 페이지에서 다른 페이지로 이동할 수 있도록 링크를 정의 (연결되어 있다) Markup : 태그로 이루어져 있으며 웹 페이지의 구조를 정의 (형태나 효과) Language : 언어 웹 페이지의 구조를 설명하는 프로그래밍 언어의 한 종류로 웹 브라우저에서 웹 페이지의 정보를 적절한 태그와 속성을 이용해서 명확한 의미를 가진 문서를 만들어 설명한다 ‘무엇을 어디에 배치할지’ 구조화하는데 사용된다 ex) 방 하나가 웹 페이지라고 생각하면 그 방 안에 가구들을 배치하는데 사용되는 것이 HTML! 특징 구조가 단순 / 문법이 쉽다 논리적이고 연산적인 요소가 없으며 단순한 구조를 가지고 있다 텍스트 파일 따로 컴파일 작업이 필요하지 X 편집..