본문 바로가기
  • Web design. Publishing. Detail page.
반응형

css5

독학으로 퍼블리싱 공부하는 방법 퍼블리싱(웹 퍼블리싱, HTML/CSS/JavaScript로 웹페이지를 만드는 과정)을 독학으로 공부하려면, 단순히 “문법을 배우는 것”보다 만들어보면서 습득하는 방식이 훨씬 효과적이에요.아래 순서대로 진행하면 체계적으로 실력을 올릴 수 있습니다.1. 기본기부터 다지기퍼블리싱의 핵심은 HTML(구조) + CSS(디자인) + **JavaScript(동적 요소)**입니다.단계학습 포인트추천 자료HTML태그 의미와 구조(시맨틱 태그: , 등)MDN HTML 가이드CSS박스모델, Flex/Grid 레이아웃, 폰트·컬러 스타일링CSS Tricks / MDN CSSJavaScriptDOM 제어, 이벤트 처리, 기본 문법JavaScript.info 📌 팁: 하루 1~2개 태그나 속성을 직접 써보고, 브라우저에서 .. 2025. 8. 13.
[css/script] 실무 적용 d-day 활용 카운트다운 소스 디데이 설정하여 카운트다운 보여주기 "> 2025. 7. 3.
[CSS] Transform 속성 쉽게 배우기 – 이동, 확대, 회전, 기울이기 ransform 속성은 HTML 요소에 회전, 크기 조절, 이동, 기울이기 등의 2D 또는 3D 변형을 적용할 수 있게 해주는 CSS 속성이에요.쉽게 말해, 요소의 모양이나 위치를 변화시키는 데 사용돼요. 🔧 주요 transform 함수들함수 이름설명translate(x, y)요소를 x, y 방향으로 이동scale(x, y)요소의 크기를 x배, y배로 조절rotate(각도)요소를 회전skew(x각도, y각도)요소를 기울임matrix(...)위 모든 변형을 한번에 줄 수 있는 복합 함수 (고급용) 📌 예시로 보면 더 쉬워요css .box { transform: translate(50px, 20px); } ➡️ .box라는 요소가 오른쪽으로 50px, 아래로 20px 이동해요.css .box { tran.. 2025. 6. 20.
[css] height:100vh 세로 중앙 정렬하는 2가지 방법 1. height:100vh 세로 중앙 정렬하는 방법flexbox 사용하기display: flex;를 사용하면 부모 요소 안의 자식 요소를 세로로 중앙에 쉽게 배치할 수 있습니다. .container { display: flex; justify-content: center; /* 가로 중앙 */ align-items: center; /* 세로 중앙 */ height: 100vh; /* 화면 전체 높이 */ } align-items 속성 설명center: 중앙 정렬flex-start: 위쪽 정렬flex-end: 아래쪽 정렬 2. 요소를 가로, 세로 중앙 정렬하는 방법position 속성 사용하기position 속성을 활용하여 요소를 가운데에 정렬할 수 있습니다. .box { position: absol.. 2025. 6. 16.
Flex CSS 완벽 가이드: Flexbox로 레이아웃 자유자재로 다루기 **Flexbox(Flexible Box Layout)**는 CSS3에서 도입된 강력한 레이아웃 모델로, 수평/수직 정렬, 간격 조절, 반응형 디자인 등을 보다 직관적으로 구현할 수 있게 도와줍니다. 이 글에서는 flex의 주요 속성과 예제를 한눈에 보기 쉽게 정리했습니다. 🔧 1. Flexbox의 기본 구조html복사편집div class="container"> div class="item">1div> div class="item">2div> div class="item">3div> div> css복사편집.container { display: flex; } display: flex;를 선언하면 flex container가 생성되며, 하위 요소는 flex item이 됩니다.📌 2. Flex Contai.. 2025. 6. 16.
반응형

티스토리툴바