⏳ 2023. 4. 24. - 2023. 4. 30. CSS 속성(Property) 한글로는 같은 속성이지만 html의 속성은 attribute, css와 js에서의 속성은 property를 의미한다. 정말 다양한 css 속성이 있는데, 그 중 몇 가지를 알아보자! width & height width와 height의 기본값은 auto(브라우저가 값을 계산)이다. 인라인 요소와 블록 요소에서의 브라우저의 계산 방법이 다르니 알아두자. padding & margin 요소는 기본적으로 다음과 같은 구조를 가진다. padding은 요소의 내부 여백을 의미하며, 사용하면 콘텐츠의 크기가 커진다. margin은 요소의 외부 여백을 의미하며 특이하게도 음수값을 사용할 수 있다. 개별적으로 값을 주기도 하지만, 단축..

⏳ 2023. 4. 24. - 2023. 4. 30. 상속 스타일을 적용했을 때, 적용된 내용이 하위 요소까지 영향을 미치는 것을 스타일 상속이라고 한다. 자연스럽게 상속되는 css 속성들은 모두 글자/문자 관련 속성들이다.(모든 속성은 아님주의!) 강제 상속 코드의 유지 보수 측면에서, 상위 요소의 값을 변경하면 하위 요소의 값도 그에 따라 자동으로 바뀌는 것이 유리한데, 그때 inherit을 사용할 수 있다. .parent { width: 400px; height: 400px; background-color: red; } .child { width: 300px; height: inherit; background-color: orange; } child 요소는 parent 요소의 height 값을 따른..

⏳ 2023. 4. 24. - 2023. 4. 30. 기본 선택자 우선순위 : 전체 < 태그 < 클래스 < 아이디 전체 선택자 *을 사용하여 모든 요소를 선택 * { color: red; font-size: 100px; } 태그 선택자 태그로 선택 div { color: red; font-size: 100px; } 클래스 선택자 .을 사용하여 선택 .box { background-color: blue; padding: 20px; } 아이디 선택자 #을 사용하여 선택 #box { background-color: blue; padding: 20px; } 복합 선택자 일치 선택자 선택자를 동시에 만족하는 요소를 선택 : 모든 선택자를 공백없이 작성 div.orange { color: orange; } div이..

⏳ 2023. 4. 24. - 2023. 4. 30. 기본 문법 선택자 : { 속성: 값; 속성: 값; } div { color: red; font-size: 100px; } /* 주석은 이렇게 */ 선언 방식 내장 html의 head 태그 안에 style 태그를 사용하여 스타일을 적용하는 방법 하나의 html 파일 안에서 스타일을 관리할 수 있지만.. 유지 보수 측면에서 불리하다. html과 css 파일을 구분하는 것이 권장하는 방법!! 인라인 html의 요소에 직접 스타일을 작성하는 방법 인라인 방식은 스타일의 우선 순위가 너무 높기 때문에 유지 보수가 어렵다. 링크 link 태그를 사용하여 css 문서를 연결하는 방법(병렬) 가장 권장하는 방법! @import css 문서 안에서, 또 다른 css ..

⏳ 2023. 4. 10. - 2023. 4. 16. 프론트엔드 개발이란 HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호작용할 수 있도록 하는것 HTML(Hyper Text Markup Language) 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당 CSS(Cascading Style Sheets) 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당 JavaScript 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당 웹 기초 웹앱의 동작원리 웹 어플리케이션은 사용자의 요청(request)과 서버의 응답(response)이 이루어지면서 동작..