일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- option
- table
- BODY
- tag
- 한정수 강사님
- ::first-letter
- HTML정의
- colspan
- Head
- ::before
- Border
- :active
- Ol
- JAVA 개발 환경 설정
- 속성 선택자
- 인라인 레벨 요소
- ::first-line
- Form
- JavaScript
- BR
- !doctype html
- Li
- textarea
- ul
- Title
- 전체 선택자
- img
- select
- Python
- rowspan
- Today
- Total
목록프밍/CSS (54)
개발 공부 기록하기
Media queries미디어 쿼리 = CSS *모듈의 하나. * 모듈: 프로그램 내부를 기능별 단위로 분할한 부분. = 사이트에 접속하는 기기의 해상도, 화면 크기에 따라 서로 다른 CSS 스타일을 작성/적용하는 방법. 미디어 쿼리를 이용해 만든 사이트 예시는 https://mediaqueri.es/ 참조. 미디어 쿼리 기본형 @media [only | not] 미디어유형1, 미디어유형2, 미디어유형3... [and 조건] * [and 조건] { } /* ① only 뜻: 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 마라. ② not 뜻: 이 다음에 작성하는 미디어 유형을 제외한 다른 미디어 유형에만 미디어 쿼리를 적용해라. ③ and 뜻: 조건을 여러 개 연결해서 추..
06. 디스플레이 속성 몇몇 요소들은 본질적으로 '인라인inline 요소' 또는 '블록block 요소'이다. 인라인 요소 = 다른 요소들과 같은 라인에 배치 블록 요소 = 다른 요소들과 다른 라인에 단독으로 배치 인라인 요소와 블록 요소 간에는 같은/다른 라인에 배치된다는 차이점뿐만 아니라 margin, padding, width, height에 있어서도 차이점을 보인다. inline block inline-block width, height 무시됨. margin, padding은 다른 요소를 좌우 양쪽으로 밀어내지만, 상하 양쪽으로는 밀어내지 않음. 웹 문서의 흐름을 끊어내고 혼자 그 줄을 다 차지함. 다른 요소가 이들의 width, height, margin, padding을 침범할 수 없음. inl..
이번 섹션에 포함된 강의명은 다음과 같다. (강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!) 순서 강의명 소요 시간 중요도 (필수crucial/중요important/선택nice to have) 01 박스 모델: 가로와 세로 Box Model: Width & Height 5' 40" 필수 02 박스 모델: 테두리와 모서리 둥글리기 Box Model: Border & Border-Radius 12' 08" 필수&선택 03 코딩 연습 12: Box Model Practice Coding Exercise 12: Box Model Practice - - 04 박스 모델: 패딩 Box Model: Padding 7' 45" 필수 05 박스 모델:..
반응형 웹 디자인responsive web design PC, 스마트폰, 태블릿 PC, 스마트 TV 등 다양한 화면 크기에 맞게 웹 요소를 재배치하고 표시 방법을 바꿔 웹 사이트를 구현하는 방법. 모바일에서 웹 사이트를 PC버전으로 접속했을 때 모든 내용이 작게 보이는 이유 ∵ PC 화면에서의 픽셀 ≠ 모바일 화면에서의 픽셀 → *뷰포트viewport를 지정하면 접속한 기기의 화면에 맞게 확대/축소해서 표시할 수 있다. * 뷰포트(viewport) : 스마트폰 화면에서 실제 내용이 표시되는 영역 뷰포트 지정하는 방법 위처럼 안녕하세요? ↓ PC의 브라우저뿐만 아니라 스마트폰, 태블릿 PC 등등 기기들도 다양하고 그 화면의 크기 또한 천차만별이다. 하지만 각각의 기기에서 어떻게 보일까 테스트하기 위해서 모..
11. 가상 요소 앞에서 학습한 가상 클래스와 용어가 헷갈릴 수는 있다. 가상 요소 또한 '~에 한하여'와 같이 스타일을 적용하는 데 제한을 거는 방식이기 때문이다. 하지만 가상 요소는 선택된 요소에서도 특정 부분만을 선택하기 때문에 가상 클래스와는 엄연히 다른 개념이다. MDN 홈페이지에서 가상 요소로 쓰일 수 있는 목록들이 나타나 있는데, 그 목록 중에서도 플라스크 아이콘이 뒤에 붙어있는 것들이 있었다. (시험용을 뜻한다. 일종의 베타 테스트 중인 가상 요소이니 실제 개발 코드로 아직 사용하지 말라는 뜻이라고 한다.) ▼ MDN에 나열된 가상 요소 목록 (취소선 그어진 것이 시험용) ::after ::cue-region ::grammar-error ::selection ::backdrop ::firs..