Notice
Recent Posts
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- justify-content
- flex-direction
- 인라인 레벨 요소
- 주축 정렬
- 아이디 선택자
- 비시맨틱 태그
- CSS
- 멋쟁이사자처럼
- 자손 선택자
- 스프린트회고
- 오블완
- 성장
- 스프린트
- 개발자
- 티스토리챌린지
- 멋쟁이사자차럼
- css 마진
- 학습 전략
- 블록 레벨 요소
- css 패딩
- css 배치 속성
- 교차축 정렬
- 시맨틱 태그
- css 박스 모델
- 회고
- flex box
- 프론트엔드
- IT
- HTML
- align-items
Archives
- Today
- Total
목록블록 레벨 요소 (1)
ohjungho 님의 블로그
css 배치 속성과 반응형 웹
CSS 배치 속성과, 반응형 디자인에 대해 알아보자. 우선 h1태그와 span태그로 텍스트를 작성한 코드는 아래와 같다. Emotion SAD HAPPY LOVE Live Server를 통해 확인하면 아래 사진과 같은 결과물이 나온다. Live Server는 확장 프로그램으로, 웹 개발자들이 HTML, CSS, JavaScript 등의 파일을 브라우저에서 실시간으로 미리 보기 할 수 있게 해주는 도구이다.h1 태그로 제목을 Emotion으로 지정했고, SAD, HAPPY, LOVE는 span 태그로 줄 바꿈을 하지 않고 구문 요소를 의미한다. 코드에서는 Emotion, SAD, HAPPY, LOVE 모두 Enter키를 이용해서 각자 다른 줄에 있는데 왜 사진에서 Emoti..
Front-end/HTML,CSS
2024. 12. 31. 15:02