본문 바로가기

전체 글294

inline 요소와 block 요소의 차이 html / css 기초를 정확히 공부하지 않고 코딩을 하다보니 인라인 요소와 블록 요소의 차이 때문에 css 에서 원하는 대로 속성이 적용되지 않는 문제가 생겼지만 무엇이 원인인지 찾지 못했던 경험이 있고, css 를 공부하다 보면 인라인 요소와 블록 요소에 따라 달라지는 것들이 은근히 많아서 처음부터 확실히 정리해두고 다음 단계로 넘어가자는 생각에 정리해보게 되었습니다. inline 요소 인라인 요소로 대표적인 것은 , 태그 등이 있다. 가지고 있는 컨텐츠에 크기가 맞춰지므로 따로 크기를 지정할 수 없다. 요소가 수평으로 쌓인다.(가로배치) 상 / 하 방향에 마진을 적용할 수 없다.(좌 / 우 마진은 가능) block 요소 블록 요소로 대표적인 것은 , 태그 등이 있다. 사용 가능한 최대 가로 길이를.. 2023. 4. 12.
[제로베이스]1주차 학습요약 1주차에는 html, css 기초와 cs 지식 강의를 들었다. html, css 는 어느정도 알고있기 때문에 초반은 배속으로 들었고, 덕분에 시간을 단축해서 공부할 수 있었다. 초반에는 리스닝처럼 그동안 알고있던 것들을 다시 복기하는 정도로 공부헸지만 중반부터는 이전에 제대로 이해하지 못했던 css 지식들이 나와서 그때 이래서 코딩이 뜻대로 안됐구나.. 하고 돌아볼 수 있었다. 개념강의가 지루할 때도 있지만 코딩할 때 뭔가 알 수 없는 문제들이 생기면 다시 개념강의를 찾아듣기 때문에 이번에는 이전에 내가 놓쳤던 것들을 정리해두고 필요할 때 마다 찾아볼 생각이다. cs 지식은(특히 자료구조) 학교 다니면서도 배웠던 과목이지만 아직도 익숙해지지가 않고... 자료구조는 배워도 배워도 어려운게 아직 갈 길이 먼.. 2023. 4. 11.
CSS 선택자(Selector) - Type, Class, Id 선택자 Type 선택자 하나의 웹페이지에서 일관적으로 적용할 스타일이 있을 때 사용한다. 특정 요소를 선택하기 위해 사용하는 것 X (ex: h2 태그를 여러 번 사용하면 모든 h2 태그에 스타일이 적용되기 때문) Hello! Lorem Ipsum Have a nice day /* Type Selector */ h2 { color: purple; } h3 { color: red; } 2. ID 선택자 ID 는 중복 사용이 불가하여, 하나의 ID 는 전체 html 에서 하나의 태그에만 부여할 수 있다. Movie List Toy Story Zootopia Inside Out Lorem Ipsum Have a nice day /* ID Selector */ #movie-list { color: red; } /* C.. 2023. 4. 9.
캐스캐이딩(Cascading) 원칙 Cascading : 폭포 = 위에서 아래로 흐르는 1. 스타일 우선순위 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다. 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일(흔치않음) 적용 범위가 적을 수록 우선시 된다. tag 스타일(h1 { }) < class 스타일(.class { }) < id 스타일(#id { }) < 인라인 스타일() 소스코드의 순서가 뒤에 있으면 덮어쓴다. 중복으로 작성된 내용이 있다면 뒤에 있는 코드로 스타일이 적용됨 2. 스타일 상속 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다. 자식 요소에서 재정의 할 경우, 부모의 스타일을 덮어쓴다. 상속이 되지 않는 속성도 있다. (ex: 배경 이미지, 배경 색 등) ★ 스타일을 .. 2023. 4. 9.

티스토리툴바