# CSS
종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
JS:DOM(Document Object model)
Dom(Document Object model) > html문서 요소의 집합 html 문서는 각각의 node와 object의 집합으로 문서를 표현 따라서 각각 node 또는 objec에 접근하여 문서구조/ 스타일 / 내용 등을 변경 할수 있도로 하는것 Documen
멋쟁이사자처럼 | [대학 11기] 프론트엔드 온보딩 트랙 강의리뷰 : 챕터 2
테킷스쿨에는 멋쟁이사자처럼 [[대학11기]프론트엔드 온보딩 트랙 강의] (https://techit.education/my/courses)가 있습니다. 멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다. 이번에 리뷰하려는
20230327[CSS 선택자 총정리]
CSS 전체 선택자(\*)는 모든 형태의 모든 요소를 선택합니다.CSS 유형 선택자는 노드 이름을 사용해 요소를 선택합니다. 즉 문서 내에서 주어진 유형의 모든 요소를 선택합니다.CSS 클래스 선택자는 요소의 class 특성에 기반해 요소를 선택합니다.
지식IN 클론코딩
💻 지식IN 클론코딩 사이트: FLOW 사용언어: HTML, CSS, Jquery, gsap 분류: 반응형 PC, 클론코딩 📌 KEY POINT 흐르는 배너 폼태그 조건처리 스크롤 트리거(아래에서 위로 올라오는 애니메이션)
네이버 클론코딩 해보기 -멋사
2주차에 해보았던 네이버 회원가입 클론코딩에 대한 설명이지만 아직 설명이 많이 모자른 것 같다... 다시 복습 할 때마다 설명을 덧붙여서 괜찮은 글로 완성해봐야겠다...
[CSS] Selector - querySelector
querySelector는 특정 name, id, class를 제한하지 않고, css 선택자를 사용하여 요소를 찾는다.같은 id 또는 class 일 경우 스크립트의 최상단 요소만 로직에 포함된다.querySelector(querySelector(.class) => cl
4) 포토폴리오 사이트만들기(최종)
위 빨간색 박스 : flex direton 속성은 row 초록색 박스 : flex direton 속성은 column 아래 빨간색 박스 : flex direton 속성은 column아리 보라색 박스 : flex direton 속성은 row
SASS
SASS란? CSS로 컴파일 되는 스타일 시트 확장 언어, CSS 전처리기의 하나. 개발은 Sass를 기반으로 한 후, CSS로 export한다. 브라우저는 Sass파일을 직접 읽지 못함. 그러기 때문에 일반 CSS로 컴파일 해야함. 메인 SCSS파일은 언더스코어없이
inline, block, inline-block
너비와 높이가 내부 컨텐츠 크기만큼 설정된다.width, height의 크기를 지정할 수 없다.padding, margin으로 좌우에만 여백을 지정할 수 있다.여러개의 인라인 태그가 있을 경우, 수평으로 쌓인다.인라인 태그: span a button img 등등 한 줄
Web font 적용하기
무료로 사용할 수 있는 구글 폰트를 사용하여 개인 프로젝트의 폰트를 변경해보았다.사용된 폰트는 2종류 이며 title, content 부분에 각각 따로 적용하였다.사이트에 접속하여 Download family를 눌러 폰트를 다운로드 해주자.React 폴더구조에서 pub
[CSS] position
position 속성은 요소의 위치를 정의한다.top, bottom, left, right 속성과 함께 사용되기도 한다.staticposition을 지정하지 않았을 때와 같다.기본값으로 위치의 변화가 없다.이미 설정된 position을 무력화하기 위해 사용된다고 한다.
[웹화면구현] 03.27_CH8_실습
!codepenMotoong/embed/xxaMMBV?default-tab=html%2Cresult이미지출처 - https://i.pinimg.com/originals/59/54/b4/5954b408c66525ad932faa693a647e3f.jpg
멋사 두 번째 과제
이번 과제는 동아리 활동 때 했던 네이버 회원가입 창 클론코딩에 이어서html과 js 파일을 연결하는 것이다! (그리고 활동 때 홀로 오류난 것을 고치는 것도...)
CSS - #flexbox (1)
float으로 레이아웃을 구성할 때 보다 훨씬 간편하게 레이아웃을 정렬할 수 있는 flex에 대해 알아보자.Flex 레이아웃을 만들기 위한 기본적인 html 구조Flex 레이아웃을 만들기 위한 기본적인 css위와 같이 부모 태그인 .flex-container에 flex
CSS @supports 사용법
지원하는 css에 따른 스타일 적용이 된다면 좀 더 스마트하고 효과적으로 css를 작성할 수 있을 것이다. 오늘은 @supports css 사용법에 대해 알아보고자 한다.