IT개발기

📌 SASS 공부 SASS의 특징 sass(scss) : css의 확장 언어 css보다 조금 더 높은 자유도를 개발자들에게 부여 sass에서 nesting 구조는 많아도 4구조 3구조 내에서 하는 것이 좋다 설치 방법 브라우저: html, js ,css - sass(scss) > css : webpack, node로 연결 vscode 설치: Sass, live sass compiler(sass를 css로 컴파일 해주는 역할) 📌 sass1 기본적용: nesting 구조로 계층을 잡을 수 있음 body { .box { width: 100%; background-color: white; color: black; //& 부모를 가르킨다 => .box:hover { background-color: white} ..

📌 z-index ● 특징: z-index 의 크기가 클수록 층이 더 생긴다고 생각 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum aliquid perspiciatis nihil beatae dolor sint assumenda adipisci, corrupti, unde minima ducimus cum dolorum odit, veniam excepturi. Unde placeat cum iure? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum aliquid perspiciatis nihil beatae dolor sint assumenda adip..

position position: absolute; - 기준: 부모 (box의 경우 부모는 body다) 특징: 태그의 부모가 기준이된다. position: fixed; 기준: 브라우저 특징: 부모와 상관없기에 position: relative; - 기준: 내 위치 예시: 태그의 부모로서 relative를 선택해준다. position: static; 기준이 없어 좌표적용이 필요없다. 특징: 기본적인 적용 other parent target other

📌 가상요소 ● 특징1: :: 를 사용해 표시 ● 특징2: content의 필수입력 ● 특징3: 가상요소에서 가장 중요한 before, after 태그로 전 훅 관계를 나타냄 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis voluptatibus, maiores quo aperiam modi cumque accusamus, beatae sit hic, ab dolorem atque a enim sapiente quasi numquam quibusdam placeat nihil.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos, molestiae molestias, fugit commodi aut vel perferendis sequi animi ipsa maiores aspernatur mollitia voluptas deleniti nulla perspiciatis! Reiciendis dolores quos consectetur? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos, molestiae molestias, fugit commodi aut vel perferendis sequi animi ipsa maiores a..

📌 css 선택자 ● 1.태그이름 p {color: red} ● 2.class .class이름{color: red} ● 3. #id #id이름{color:red} ● 4. * 모든거 * {color: red} ● 5. 선택자 " " 선택자 특징: 직계가 아니어도 다 선택 div p {color: red} ● 6. 선텍자 "+" 선택자 특징: 태그 끝난 바로 직후의 다음 태그 (직후가 아니면 선택되지 않는다.) div + p {color: red} ● 7. 선택자 ">" 선택자 : 직계 선택자 (태그 안에 바로 직계된 선택자만) div > p {color : red} ● 8.선택자 "~" 선택자 : 물걀은 +보다 더 여유롭게 선택이 가능하다.(바로 직계가 아니어도 가능하다.) .test ~ .lorem ●..

📌 div : html의 영역을 나눠주는 태그 div 태그로 나누는 이유 유지보수의 용이성. 협업의 용이성. div.class, id 명명시 누가 보더라도 알아볼 수 있도록 (직관적인 명명) 예시: header, footer, headerSearch, header-search 직관적인 명명 하기 명사사용 2가지 규칙: headerSearch, header-search div 태그 이용시 사용하는 상속 display: inline; 텍스트 display: blokc: 쌓이는 상자 상속이 되는 속성 font-size 📌 px, em, rem : 폰트 사이즈를 나타내주는 단위 16px = 1em = 1rem em: 부모태그에게 font-size 속성이 있으면, 그 속성을 1em으로 계산 rem: html에서 ..