Frontend/CSS
-
CSS 입문 (6) 미디어쿼리Frontend/CSS 2023. 7. 30. 00:14
미디어쿼리 목적: 미디어 매체마다 다른 CSS 스타일을 적용할 수 있게 함. 미디어 매체 = 스크린 매체(모니터, 폰 디스플레이), 프린트, 스크린 리더기 등 미디어쿼리는 CSS2의 미디어 타입(Media Types)을 확장해서 만들어짐. 미디어 쿼리를 사용하여 반응형 동작 처리도 가능해짐. 1) 미디어타입 Media Type all, screen, print(이쇄 미리보기로도 확인 가능), 생략 = all 2) 미디어특성 Media Feature width: 뷰포트의 너비 = 브라우저 창의 너비 orientation: 미디어가 세로모드(portrait)인지 가로모드(landscape)인지 구분 3) 미디어쿼리 문법 @media mediaqueries{/* style rules */} @media( at..
-
CSS 입문 (5) 레이아웃Frontend/CSS 2023. 7. 29. 00:19
1) display 요소의 rendering box(스타일이 그려지는 방식) 유형을 결정하는 속성. 기본 값은 각 Tag마다 갖는 기본 값을 따름. display 값에 따라 표현되는 방식이 바뀔뿐이지 해당 요소의 box model 자체가 바뀌는 것은 아님. (껍데기만 바꾸는 것) 값 none: 요소를 rendering 하지 않음. = 화면에 표시되지 않음. inline: inline-level 요소처럼 rendering. width와 height 속성이 적용되지 않고, margin, border, padding 의 값은 좌/우에만 적용됨. → 효과 적용은 상/하에도 되는 것 같지만 상/하 간 요소끼리 collapse가 발생하지 않고 상/하의 content들이 겹쳐질 수가 있음. ⇒ 실무에서는 잘 사용하지..
-
CSS 입문 (4) 폰트, 텍스트Frontend/CSS 2023. 7. 26. 23:36
1) typography Baseline: 소문자 ‘x’의 하단 라인 (소문자 ‘x’가 기준) ex: 소문자 ‘x’의 높이 (소문자 ‘x’가 기준) Descender: Baseline 아래로 넘어가는 영역 . ex) xgypqjx … 에서 x뒤에 나오는 문자들의 꼬리가 위치하는 영역 Ascender: ex 위로 넘어가는 영역. ex) xTbAldkiJhx ….. 에서 x뒤에 나온 문자들의 상단이 위치하는 영역 em: 폰트의 전체 높이. 2) font-family 글꼴을 결정하는 속성. font-family: family-name, generic-family 이름 중간에 공백이 있거나 한글명일 때에는 작은따옴표(’) 로 묶어서 선언. 한글 글꼴을 지정할 때에는 반드시 영문으로된 글꼴명도 같이 선언해줄 것...
-
CSS 입문 (3) 단위, 배경, 박스모델Frontend/CSS 2023. 7. 20. 23:37
1) 정의와구문 CSS 는 주기적으로 Update 되고 있으므로 신뢰도 높은 사이트에서 주기적으로 확이해주는 것이 좋음. 참고 사이트 https://www.w3schools.com/ https://developer.mozilla.org/ko/docs/Web/CSS 위와 같은 사이트에서 다음을 확인할 수 있다. 정의 : 속성에 대한 설명 스펙 Spec: 속성마다 갖고 있는 설정. 모든 스펙은 기본 값을 갖는다. ex) font-size 는 Default vlaue, Inherited, Animatable, Version, JavaScript systax 라는 스펙을 갖는다. Version은 CSS 의 버전을 의미하며 CSS의 버전에 따라 지원되는 브라우저의 종류, 버전이 달라지므로 사용 시 사전 확인이 중..
-
CSS 입문 (2) 가상 선택자 ~ CascadingFrontend/CSS 2023. 7. 15. 00:36
5) 가상 선택자1 ~ 2 가상클래스: 동적인 조건/상황을 미리 클래스로 정의한다.(=가상 클래스) 해당 조건/상황이 만족되었을 때 브라우저가 특정 요소에 미리 정의된 가상 클래스를 적용하도록 하는 CSS의 기능. 일반적으로 동적 처리되어야 하는 부분은 HTML + CSS 만으로 처리하기 어렵지만 자주 쓰이는 상황에 대해서는 가상클래스로 미리 구현하여 적은 비용으로 처리 가능하게 함. ‘:’ + 가상 클래스명 사용 방법: Tag명**:가상클래스명** { ~ } ex) a:first-child{color:red;} :first-child {~}, :last-child {~} Tag 중 첫번째/마지막이 되는 요소에 적용되는 클래스 (문서 구조 관련) :link { ~ }, :visit { ~ } Tag 중 ..
-
CSS 입문 (1) 기본 문법 ~ 선택자Frontend/CSS 2023. 7. 14. 00:03
CSS 이해하기 1) CSS 소개 Cascading Style Sheets 2) CSS 문법과 적용 구성 선택자(selector): style을 적용할 요소. 속성(property): html tag의 속성(attribute)과 구별할 것 값(value) 선언(declaration): 속성(property): 값(value); 선언부(declaration block): { (선언) } 규칙(rule set): 선택자+선언부 CSS 적용방법 Inline : html Tag에 속성으로 추가. ex). 요소마다 선언해주어야 하므로 관리 불편. Intenal: External: 외부 스타일 시트. 별도의 .css 파일을 생성하여 해당 파일의 링크를 head에 선언하는 방식. ex) 스타일이 파일로 관리되므로 I..