HTML & CSS27 [CSS 기초] 단위 (px, %, vw, vh, em, rem) 안녕하세요 PNcoding입니다 :) CSS에서는 선택자의 크기를 지정하기 위해 사용되는 여러 가지 단위가 있습니다. 예를 들어 div { width: 300px; } 이라고 적을 때 숫자 뒤에 쓰인 px이 바로 단위입니다. 이번 포스팅에서는 이러한 단위의 종류에 대하여 알아보도록 하겠습니다. px (pixels 픽셀) CSS에서 사용되는 가장 기본적인 단위입니다. 브라우저의 크기가 변경이 되든, 축소되든 확대가 되던지 항상 그 크기값이 변하지 않기 때문에 절대적인 값이라 불러 줍니다. 또한 다른 요소들의 크기에 영향을 받지 않습니다. % (퍼센트) 부모요소의 크기값에 비례하여 적용되는 단위입니다. 부모요소의 크기에 따라 값이 상대적으로 변하기 때문에 상대적인 값이라고 불러줍니다. 부모와 자식요소를 만들.. 2023. 11. 27. [HTML 기초] form(폼)태그와 input(인풋)태그, label태그 안녕하세요 PNcoding입니다 :) 오늘 배울 내용은 폼 요소로 쓰이는 태그들에 대하여 알아보도록 하겠습니다. 들어가기에 앞서 폼 요소들은 입력하는 공간을 통해 사용자로부터 정보를 전달받는 역할을 합니다. 즉, 사용자와 대화할 수 있는 인터렉티브(Interactive)한 영역이라고 볼 수 있습니다. 태그 폼 태그는 웹페이지에서 입력할 수 있는 양식을 만들 때 사용됩니다. 예를 들어 회원가입, 로그인, 게시판, 쇼핑몰 주문 등의 많은 곳에 사용되고 있습니다. 이렇게 입력받은 데이터들은 서버 혹은 다른 페이지에 전달해 줄 수 있으며, 폼 태그의 세세한 기능들은 주로 개발자(JavaScript)들이 다룬다고 보시면 되겠습니다. 속성 action : 데이터를 전달할 url을 넣어줌 method : 폼 요소를 .. 2023. 11. 24. [CSS 기초] 미디어 쿼리 (media query) 안녕하세요 PNcoding입니다 :) 웹 사이트에 접속할 수 있는 기기는 다양한 종류가 있습니다. 예를 들면 맥북, 아이패드, 아이폰, 갤럭시 제트플립 등이 있죠. 이러한 다양한 기기는 또한 화면의 크기도 다양합니다. 따라서 이러한 다양한 화면에서 웹사이트를 잘 보이도록 스타일을 변경해 주는 게 필수 요소가 되었죠. 이렇게 스타일을 변경시켜 주는 것을 반응형이라고 하며, 이러한 반응형을 구현하기 위해 css의 미디어 쿼리를 활용을 해야만 합니다. 따라서 오늘은 요즘 시대의 필수 미디어 쿼리에 대하여 알아보도록 하겠습니다. 미디어 쿼리 (Media Query) 미디어 쿼리는 기기의 유형, 화면 해상도, 뷰포트 너비 등에 따라 웹사이트의 스타일을 변경할 때 사용합니다. 미디어 쿼리의 가장 기본적인 구조는 아.. 2023. 11. 20. [HTML 기초] 시맨틱 태그 (semantic tag) 안녕하세요 PNcoding입니다 :) 오늘은 시맨틱 태그에 대하여 알아보도록 하겠습니다. 태그가 어떤 건지 또는 종류를 잘 모르시는 분은 HTML 구조 및 태그의 종류를 보고 오시면 더 도움이 되실 거예요 :) https://pncoding.tistory.com/10 [HTML 기초] HTML 구조 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 HTML 기초에 대해 알아볼게요! HTML은 HyperText Markup Language의 약자로 웹페이지의 구조를 정의하는 마크업 언어 입니다. HTML을 사용하기 위해서는 태그(ta pncoding.tistory.com https://pncoding.tistory.com/11 [HTML 기초] HTML 태그 종류 (1) - h 태그, p 태그, br .. 2023. 11. 19. [HTML 기초] 비디오태그 (video), source 태그 , 유튜브 영상 넣기 안녕하세요 PNcoding입니다 :) 오늘은 웹사이트에서 동영상을 쉽게 볼 수 있게 도와주는 비디오태그에 대하여 알아보도록 하겠습니다. video 태그 비디오 태그는 HTML5에서 추가된 태그 중 하나이며, 주로 웹사이트에 동영상을 삽입해 줄 때 사용됩니다. 비디오태그를 사용하면 웹사이트에 누구나 쉽게 동영상을 삽입해 줄 수 있으며, 사용자들은 별도의 플러그인을 설치하지 않더라도 동영상을 쉽게 볼 수 있게 되었습니다. 비디오 태그의 속성 src : 불러올 동영상 경로 연결 controls : 동영상 컨트롤 장치 생성 autoplay : 동영상 자동재생 (기본적으로 muted와 함께 사용) muted : 동영상 음소거 loop : 동영상 반복 재생 width : 동영상 가로크기 지정 height : 동영상.. 2023. 11. 16. [CSS 기초] 트랜스폼 (transform) 안녕하세요 PNcoding입니다 :) 오늘은 트랜스폼(transform) 속성에 대하여 알아보도록 하겠습니다. 트랜스폼은 주로 트랜지션과 함께 사용되는 경우가 많으니 트랜지션이 궁금하신 분은 여기를 참고해 주시면 되겠습니다 :) https://pncoding.tistory.com/29 [CSS animation] 트랜지션 (transition) 안녕하세요 PNcoding입니다 :) 오늘은 트랜지션(transition)에 대하여 알아보도록 하겠습니다. 트랜지션과 유사하지만 다르게 움직임을 표현해 주는 속성인 애니메이션에 대하여 궁금하신 분은 여기 pncoding.tistory.com 트랜스폼은 요소에 위치이동, 회전, 크기조절, 기울이기 효과를 적용시켜 줄 수 있는 속성입니다. 트랜스폼의 종류는 총 4가지.. 2023. 11. 15. 이전 1 2 3 4 5 다음 반응형
