분류 전체보기46 [CSS 기초] css 선택자 (1) 태그, 클래스, 아이디 선택자 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 CSS를 처음 사용하기 위해 필수인 선택자에 대해 알아보도록 할게요! *선택자 란? HTML의 태그를 선택하는 방법으로 원하는 태그를 선택 후 스타일을 지정할 수 있습니다. 1. 태그(tag) 선택자 HTML의 태그 즉, 요소(element)를 선택하는 방법입니다. /* CSS 코드 */ div { width: 100px; height: 100px; background-color: salmon; } div 태그 1 div 태그 2 div 태그 3 원하는 태그명을 작성 후 { } (중괄호)를 열어 CSS 속성을 작성을 하면 선택한 태그에게 스타일을 적용할 수 있습니다. 이때 body내의 선택한 모든 태그가 동일한 스타일이 적용됩니다. 2. 클래스(cla.. 2023. 11. 1. [HTML 기초] HTML 태그 종류 (1) - h 태그, p 태그, br 태그 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 HTML 태그의 종류에 대해 알아볼게요! 1. 제목태그 h 태그 h 태그는 문서의 제목을 표시할 때 사용하는 태그로서 "heading"의 뜻을 가지고 있습니다. h 태그는 h1부터 h2, h3 ~ h6까지의 총 6개가 있으며, h1 태그의 크기가 가장 크게 h6 태그의 크기가 가장 작게 표현됩니다. 즉, h 태그 옆의 숫자가 작아질수록 글자의 크기가 작아진다고 보시면 됩니다. h1 태그 입니다. h2 태그 입니다. h3 태그 입니다. h4 태그 입니다. h5 태그 입니다. h6 태그 입니다. 보시다시피 h1 으로 적어준 내용이 가장 큰 것을 확인할 수 있습니다. 하지만 h 태그를 사용할 시 주의하셔야 할 점이 있습니다. h1 태그를 사용할 시, 반드시.. 2023. 10. 31. [HTML 기초] HTML 구조 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 HTML 기초에 대해 알아볼게요! HTML은 HyperText Markup Language의 약자로 웹페이지의 구조를 정의하는 마크업 언어 입니다. HTML을 사용하기 위해서는 태그(tag)를 알아야되는데 태그가 무엇일까요? 1. 태그 태그는 HTML을 사용하기 위해 사용하는 하나의 명령어 라고 보시면 됩니다. 보여줄 내용을 감싸서 사용하며, 태그의 특정한 방식으로 동작 하도록 구성 되어있습니다. 태그가 적용될 내용 2. 태그의 규칙 태그는 꺽쇠괄호 로 구성 되어 있으며 시작태그와 종료 태그, 한 쌍으로 구성되어 있습니다. 단, 종료태그는 슬러시( / ) 기호를 앞에 붙여 태그 종료를 선언 합니다. 3. HTML 구조 HTML을 사용하기 위한 기본 구.. 2023. 10. 31. [UX UI figma] 피그마 인터페이스 (4) - 디자인 패널 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 Figma의 인터페이스 중 디자인 패널에 대하여 알아보도록 할게요! 저번 포스팅에서 피그마 툴바, 레이어 패널에 대하여 알려드렸으니 궁금하신 분들은 참고해 주시면 됩니다. https://pncoding.tistory.com/6 [UX UI figma] 피그마 인터페이스 (1) - 툴바 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 Figma의 인터페이스에 대하여 알아보도록 할게요! 우선 Figma(밑에서는 한글로 지칭하도록 하겠습니다)를 사용하기 위해서는 계정을 먼저 만들어 주셔 pncoding.tistory.com https://pncoding.tistory.com/8 [UX UI figma] 피그마 인터페이스 (3) - 레이어 패널 안녕하세.. 2023. 4. 6. [UX UI figma] 피그마 인터페이스 (3) - 레이어 패널 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 Figma의 인터페이스 중 레이어 패널에 대하여 알아보도록 할게요! 저번 포스팅에서 툴바에 대하여 설명을 했으니 궁금하신 분은 저번 포스팅을 참고해 주시면 됩니다. https://pncoding.tistory.com/6 [UX UI figma] 피그마 인터페이스 (1) - 툴바 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 Figma의 인터페이스에 대하여 알아보도록 할게요! 우선 Figma(밑에서는 한글로 지칭하도록 하겠습니다)를 사용하기 위해서는 계정을 먼저 만들어 주셔 pncoding.tistory.com https://pncoding.tistory.com/7 [UX UI figma] 피그마 인터페이스 (2) - 추가적인 툴바 안녕하세요 P.. 2023. 3. 17. [UX UI figma] 피그마 인터페이스 (2) - 추가적인 툴바 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 Figma의 인터페이스 중 추가적인 툴바에 대하여 알아보도록 할게요! 저번 포스팅에서 기본적인 툴바에 대하여 설명을 했으니 궁금하신 분은 저번 포스팅을 참고해 주시면 됩니다. https://pncoding.tistory.com/6 [UX UI figma] 피그마 인터페이스 (1) - 툴바 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 Figma의 인터페이스에 대하여 알아보도록 할게요! 우선 Figma(밑에서는 한글로 지칭하도록 하겠습니다)를 사용하기 위해서는 계정을 먼저 만들어 주셔 pncoding.tistory.com 피그마 화면의 중앙 상단에 있는 툴 내용과 오른쪽상단의 툴에 대하여 설명드리도록 하겠습니다. 1. 가운데 위치한 툴바 영역 피.. 2023. 3. 10. 이전 1 ··· 4 5 6 7 8 다음 반응형
