스터디일지/CSS11 [CSS] 기본 익히기 PART 2 Selector(선택자) 기본 선택자 전체 선택자 - *를 사용하며 모든 요소를 선택할 때 사용한다.(초기화 할때 자주 사용한다.) /* 전체 선택자 */ * { margin: 0px; padding: 0px; } 타입 선택자 - 태그를 선택해서 적용한다. /* Type 선택자 */ h2 { color: green; } p { color: gray; font-weight: 400; text-align: center; } 클래스 선택자 - class명으로 스타일을 적용한다. /* Class 선택자 */ .red--text { color: red; } .blue--text { color: blue; } ID 선택자 - ID 속성에 맞는 요소를 선택해 스타일을 적용한다. ID는 고유해야하므로 겹쳐서는 안된다... 2024. 3. 13. [CSS] 기본 익히기 PART 1 CSS의 구조 선택자 - 꾸미고 싶은 태그(요소) 속성명 - 스타일의 종류 속성값 - 스타일 CSS 적용방법 인라인 스타일 - Inline Style Sheet 태그 안에 스타일을 명시하는 방법 여러개의 스타일을 적용할 때는 ;(세미콜론)을 사용한다 실무에서 잘 사용하지 않지만 정말로 바뀌지 않는 스타일이 있을 때 사용한다. 제목 내부 스타일 - Internal Style Sheet 헬스 헬스장에서 운동한다 외부 스타일 - External Style Sheet 제일 많이 사용하는 방법 외부에 css 확장자를 만들어 사용한다. html 파일에 link 태그를 명시하고 href로 css의 경로를 불러와서 사용한다. 코딩 우리는 코딩을 배우고 있다 /* CSS 파일 코드 */ h1 { color: blue; .. 2024. 3. 13. [CSS] Flex 공부하기 프로젝트에서 프론트 부분을 맞게 되어 기본개념을 공부하고자 글을 작성하게 되었습니다. Flex란? CSS에서의 Flex는 Flexible Box 혹은 Flexbox라고 부르기도 한다. Flex는 레이아웃 배치 전용 기능으로 고안되었고 편리하게 레이아웃을 만들 수 있다. 부트스트랩에서 자주 사용했던 기능은 주소로 첨부했다(https://getbootstrap.kr/docs/5.3/utilities/flex/) 아래는 예시로 많이 쓰이는 코드다 helloflex abc helloflex 위의 코드에서 contatiner는 부모요소인 div.container이며 이것은 Flex Container와 같은 의미고 자식 요소인 div.item은 Flex Item과 같은 의미다 즉 컨테이너는 Flex의 영향을 받는 .. 2024. 2. 25. 이전 1 2 3 다음
