PNcoding 피엔코딩

본문 바로가기

최신 글

[웹디자인기능사 실기] C-1 해운대 빛축제 jQuery 안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 C-1 타입인 해운대 빛축제 jQuery 구현을 해보도록 하겠습니다 :) HTML, CSS 코드가 궁금하신 분들은 여기를 참고해 주시면 되겠습니다. https://pncoding.tistory.com/47 [웹디자인기능사 실기] C-1 해운대 빛축제 HTML, CSS 안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 C-1 타입인 해운대 빛축제 html, css 구현을 해보도록 하겠습니다 :) 항상 문제를 풀기 전, 받은 시험지 내용을 꼼꼼하게 읽고 (하지만 10분은 넘지 않 pncoding.tistory.com 이전 포스팅에서 만들어 둔 HTML, CSS 코드에 jQuery 연결을 먼저 진행해 주도록 하겠습니다. jQuery도 동일하게 외부로.. 2024.03.03
[웹디자인기능사 실기] C-1 해운대 빛축제 HTML, CSS 안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 C-1 타입인 해운대 빛축제 html, css 구현을 해보도록 하겠습니다 :) 항상 문제를 풀기 전, 받은 시험지 내용을 꼼꼼하게 읽고 (하지만 10분은 넘지 않도록!!) 체크한 다음 진행하도록 합시다 :) 실격요인도 항상 체크를 해야겠죠? https://pncoding.tistory.com/16 [웹디자인기능사 실기] 유의사항 및 실격요인 웹디자인기능사 실기를 치실 때 반드시 체크해야 할 사항들이 몇 가지가 있습니다. 반드시 체크하신 다음 시험준비를 하도록 합시다~! 전체적인 중요 체크포인트 주어진 자료(수험자 제공파일) pncoding.tistory.com 공개문제를 받지 못하신 분들은 아래 포스팅을 참고해 주세요! https://pncoding.. 2024.03.03
[웹디자인기능사 실기] 2024 공개문제 분석 (F타입 포함) 안녕하세요 PNcoding입니다 :) 2024년도 공개문제를 분석을 한번 해보도록 하겠습니다. 2024년도 문제에서는 F타입이 추가가 되었네요. 각 타입별로 4개씩 해서 총 공개문제는 24개가 제공이 되어 있어요. A~E 타입까지는 작년도 공개문제와 동일하니 전 포스팅을 참고해 주시면 되겠습니다 :) https://pncoding.tistory.com/17 [웹디자인기능사 실기] 공개문제 분석 안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 공개문제를 분석을 한번 해보도록 하겠습니다. 시험 대비를 하실때에 공개문제만 제대로 시간 내에 푸는 연습만 하신다면 충분히 합격하실 수 있 pncoding.tistory.com 공개문제 다운로드를 하지 못하신 분들은 아래 포스팅을 참고해 주세요. https:/.. 2024.03.03
[웹디자인기능사 실기] 2024 공개문제 다운로드 안녕하세요 PNcoding입니다 :) 2024년도 기능사 시험일정이 나왔네요. 실기 시험일자는 큐넷에서 확인하실 수 있으며,반드시 일정을 잘 확인하여 시험신청을 해 주시면 되겠습니다! Q-net 자격의 모든것 Q-net 자격의 모든것 www.q-net.or.kr 실기 시험 일정 아래의 이미지는 2024년도 기능사 시험 일정표입니다. 실기 시험 수수료는 20,100원입니다 :) 공개문제 다운로드 아래는 큐넷의 공개문제 페이지 주소입니다. 공개문제 자료실 상세 | Q-net 공개문제 자료실 상세 | Q-net BODY { FONT-SIZE: 10pt; FONT-FAMILY: Malgun Gothic; COLOR: #000000; MARGIN: 0px } P { MARGIN-BOTTOM: 0px; MARGIN.. 2024.03.03
[ 크몽 전자책 ] 한눈에 볼 수 있는 웹 기초 용어 모음집 안녕하세요 PNcoding입니다 :) 오늘은 크몽에 업로드한 전자책을 소개해 드리도록 하겠습니다. https://kmong.com/gig/530379 한눈에 볼 수 있는 웹 기초 용어 모음집 - 크몽 PNcoding 전문가의 전자책 서비스를 만나보세요. 안녕하세요 PNcoding입니다.수업을 진행하며 많이 듣는 질문이 있습니다.“선생님 이 용... kmong.com 이 책은 웹을 배우는 데 있어 잘 모르는 단어들을 정리하여 만든 전자책입니다. 웹을 처음 배우시는 분들 중 새로운 단어들로 인해 적응을 하지 못하고 포기를 하는 경우를 종종 보았습니다. 또한 단어를 암기하는데 집중을 하다 보니 오히려 웹에 대한 관심도가 떨어지는 경우도 보았습니다. 그러한 분들을 위해 기초 용어를 모아둔 전자책을 집필하게 되었.. 2024.01.04
[CSS 기초] flex 속성 안녕하세요 PNcoding입니다 :) 오늘은 레이아웃을 작성할 때에 유용하게 사용되는 flex 속성에 대하여 알아보도록 하겠습니다. Flex flex는 flexible box 혹은 flexbox라고 부르기도 합니다. flex는 CSS의 display 속성으로 지정을 해 줄 수 있으며, 기존에 웹페이지의 레이아웃을 작성할 때에 사용되었던 float나 inline-block 등을 이용한 방법보다 훨씬 유용하게 레이아웃을 작성할 수 있는 장점이 있습니다. Flex를 사용하기 위한 HTML 구조 flex를 사용하기 위해서는 반드시 부모요소와 자식요소가 필요합니다. 부모요소가 flex가 적용되는 영역이며, 부모요소 안의 자식요소들이 적용한 방법대로 배치가 된다고 생각하시면 됩니다. 첫번째1 222 플렉스3 부모요.. 2023.12.15
[CSS 응용] 탭 메뉴 만들기 안녕하세요 PNcoding입니다 :) 오늘은 인풋태그를 활용한 탭메뉴를 만들어 보도록 하겠습니다. 인풋과 관련된 내용은 아래의 포스팅을 참고해 주세요 :) https://pncoding.tistory.com/36 [HTML 기초] form(폼)태그와 input(인풋)태그, label태그 안녕하세요 PNcoding입니다 :) 오늘 배울 내용은 폼 요소로 쓰이는 태그들에 대하여 알아보도록 하겠습니다. 들어가기에 앞서 폼 요소들은 입력하는 공간을 통해 사용자로부터 정보를 전달받는 역 pncoding.tistory.com 바디구조 작성 1 (구조 작성) 먼저 바디구조를 작성해 보도록 하겠습니다. 탭1 탭2 탭1 내용 탭2 내용 인풋태그의 종류 중 radio를 사용하여 탭메뉴를 구성해 보도록 하겠습니다. 탭의 형.. 2023.12.12
[CSS 기초] img태그와 background-image 차이 안녕하세요 PNcoding입니다 :) 오늘은 img 태그와 background-image의 차이에 대하여 알아보도록 하겠습니다. img태그나 배경이미지 관련해서 궁금하신 분들은 아래 포스팅을 참고해 주시면 되겠습니다 :) https://pncoding.tistory.com/13 [HTML 기초] HTML 태그 종류 (2) - img 태그, a 태그 안녕하세요 PNcoding입니다 :) 웹사이트에는 필수적으로 이미지가 들어가 있어요. 글자만 있는 사이트보다는 중간중간 이미지가 들어있는 사이트가 좀 더 이쁘게 보이며 사용자(유저) 입장에서 좀 pncoding.tistory.com https://pncoding.tistory.com/18 [CSS 기초] css 배경 속성 안녕하세요 PNcoding입니다 :) .. 2023.12.08
[CSS 응용] 숨김 메뉴 만들기 안녕하세요 PNcoding입니다 :) 오늘은 인풋태그를 활용해 간단한 숨김메뉴 형태를 만들어 보도록 하겠습니다. 인풋태그가 궁금하신 분은 아래 포스팅을 참고해 주세요 :) https://pncoding.tistory.com/36 [HTML 기초] form(폼)태그와 input(인풋)태그, label태그 안녕하세요 PNcoding입니다 :) 오늘 배울 내용은 폼 요소로 쓰이는 태그들에 대하여 알아보도록 하겠습니다. 들어가기에 앞서 폼 요소들은 입력하는 공간을 통해 사용자로부터 정보를 전달받는 역 pncoding.tistory.com 바디구조 작성 먼저 바디구조를 작성해 보도록 하겠습니다. = 인풋 태그 중 체크박스 기능을 활용하여 한번 체크하였을 때 메뉴박스가 보이도록, 한번 더 체크하였을 때(체크 해제 .. 2023.12.04
[UX UI figma] 피그마 오토 레이아웃 (Auto layout) 안녕하세요 PNcoding입니다 :) 오늘은 피그마의 핵심 기능 중 하나인 오토 레이아웃에 대하여 알아보도록 하겠습니다. 피그마를 아직 사용해 본 적 없으신 분들은 이 포스팅을 참고해 보세요! https://pncoding.tistory.com/5 [UX UI figma] 피그마란? 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 UX UI 디자인에서 자주 사용하는 Figma에 대하여 알아볼게요! 1. 피그마(figma)란? https://www.figma.com/ Figma: the collaborative interface design tool. Build better products a pncoding.tistory.com 오토 레이아웃? 피그마의 오토레이아웃은 UI 디자인을 보다 더 쉽고 효.. 2023.12.01
[CSS 기초] CSS 적용 우선순위 안녕하세요 PNcoding입니다 :) 스타일을 적용시킬 때 있어서 어떤 때는 적용이 되고 어떤 때는 적용이 되지 않아 당황스러웠을 때 다들 있었을 거예요. 그 이유는 스타일시트의 특징 때문인데요. CSS의 C는 Cascading(캐스캐이딩)의 앞글자로서 캐스캐이딩은 '위에서 아래로 흐르는'이라는 뜻을 가지고 있습니다. 따라서 CSS는 '위에서 아래로 흐르는 스타일시트'라는 의미를 가지고 있습니다. 즉 이 캐스캐이딩의 의미에 따라 선택자에 적용된 여러 스타일 중에서 어떤 스타일이 우선적으로 적용이 될 것인지가 정해진다고 보시면 되겠습니다. 스타일 우선순위 기본적으로 나중에 적히는 css가 우선순위가 높음 !important > 태그에 직접 적용시키는 inline 방법 > id 선택자 > class 선택자 .. 2023.11.29
[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
[UX UI figma] 피그마 프레임과 그룹 안녕하세요 PNcoding입니다 :) 오늘은 피그마에서 사용하는 프레임과 그룹이 무엇인지와 그 차이에 대하여 알아보도록 하겠습니다. 프레임 툴의 위치가 궁금하신 분은 이 포스팅을 참고해 주시면 되겠습니다 :) https://pncoding.tistory.com/6 [UX UI figma] 피그마 인터페이스 (1) - 툴바 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 Figma의 인터페이스에 대하여 알아보도록 할게요! 우선 Figma(밑에서는 한글로 지칭하도록 하겠습니다)를 사용하기 위해서는 계정을 먼저 만들어 주셔 pncoding.tistory.com 프레임(Frame)? 처음부터 피그마를 사용하신 분들은 프레임이라는 개념에 익숙하실 거예요. 하지만 피그마를 처음 배우시는 분이나 다른 툴(어도비.. 2023.11.22
[UX UI figma] 피그마 단축키 안녕하세요 PNcoding입니다 :) 오늘은 피그마에서 사용하는 단축키에 대하여 알아보도록 하겠습니다. 피그마에 대하여 궁금하신 분은 이 포스팅을 참고해 주시면 되겠습니다 :) https://pncoding.tistory.com/5 [UX UI figma] 피그마란? 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 UX UI 디자인에서 자주 사용하는 Figma에 대하여 알아볼게요! 1. 피그마(figma)란? https://www.figma.com/ Figma: the collaborative interface design tool. Build better products a pncoding.tistory.com 단축키가 없어도 프로그램을 사용하는 데에 문제는 없습니다. 하지만 단축키를 안다면 좀 .. 2023.11.21
[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
[CSS animation] 트랜지션 (transition) 안녕하세요 PNcoding입니다 :) 오늘은 트랜지션(transition)에 대하여 알아보도록 하겠습니다. 트랜지션과 유사하지만 다르게 움직임을 표현해 주는 속성인 애니메이션에 대하여 궁금하신 분은 여기를 참고해 주시면 되겠습니다 :) https://pncoding.tistory.com/4 [CSS animation] css 애니메이션 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 CSS 애니메이션에 대해 알아볼게요! CSS 애니메이션은 다양한 속성이 있는데, 속성이 너무 많다 보니 어떻게 사용하지는지, 언제 어떻게 적용하는지 pncoding.tistory.com 트랜지션은 css의 속성을 변경할 때 시간값을 부여하여 부드럽게 움직임을 구현시켜 줄 수 있습니다. 예를 들면 네이버의 메인의 이미지들.. 2023.11.14

인기 글

티스토리툴바