HTML·CSS 썸네일형 리스트형 10분 만에 퍼블리싱 용어 완벽 정리 목차 퍼블리싱 이해하기퍼블리싱은 웹디자인을 실제 웹페이지로 구현하는 과정입니다. 디자이너가 제작한 시안을 HTML과 CSS를 이용해 브라우저에서 볼 수 있는 형태로 변환하는 작업이죠.퍼블리싱은 단순히 코드를 작성하는 것이 아니라, 사용자 경험을 고려하여 디자인을 웹 표준에 맞게 구현하는 전문적인 분야입니다. 용어를 정확히 이해하고 있으면 업무 효율성이 크게 향상됩니다. HTML과 CSSHTML(HyperText Markup Language)은 웹페이지의 구조와 내용을 정의하는 마크업 언어입니다. 텍스트, 이미지, 링크 등 웹 콘텐츠의 골격을 만드는 역할을 합니다.CSS(Cascading Style Sheets)는 HTML로 작성된 문서의 스타일을 지정하는 언어입니다. 색상, 레이아웃, 폰트 등 시각적 요.. 더보기 처음 배우는 퍼블리싱 개념: 웹 디자이너 초보자를 위한 안내서 “웹을 처음 접하는 여러분도, 이 글 한 편으로 퍼블리싱의 핵심을 빠르게 이해할 수 있습니다!”안녕하세요 여러분! 웹 퍼블리싱이라는 용어, 한 번쯤은 들어보셨죠? 하지만 실질적으로 HTML, CSS, 반응형 디자인 등 다양한 개념이 얽혀 있어 처음 배우기엔 막막한 게 사실이에요. 저도 처음에는 코드 화면만 보면 머리가 하얘지곤 했답니다. 그래서 이 글에서는 전혀 기초 지식이 없으신 분도 따라올 수 있도록 퍼블리싱의 기본 개념을 차근차근 정리해보려고 해요. HTML 구조부터 CSS 스타일링, 레이아웃 배치, 반응형 웹까지 한 번에 살펴보며 여러분의 첫 퍼블리싱 여정을 든든히 지원해드릴게요!목차1. HTML 기초 구조 이해하기 2. CSS 선택자와 속성 개념 3. 박스 모델(Box Model) 완전 정복 4.. 더보기 퍼블리싱과 프론트엔드의 차이, 한눈에 정리 퍼블리싱과 프론트엔드, 다들 아는 것 같지만 막상 설명하려면 헷갈리셨죠? 이제 명확히 구분해드릴게요!안녕하세요, 여러분! 저도 처음엔 '퍼블리싱이 프론트엔드 아닌가?'라고 생각했어요. 실제로 둘은 비슷한 점도 많고, 실무에서도 자주 섞여서 쓰이니까요. 하지만 분명한 차이도 있답니다. 특히 커리어를 시작하거나 팀에서 역할을 나눌 때 이 차이를 정확히 아는 게 중요해요. 오늘은 퍼블리싱과 프론트엔드 개발이 각각 무엇을 의미하는지, 어떤 일을 하는지, 왜 다른지를 정리해볼게요!목차퍼블리싱과 프론트엔드의 개념 차이 필요한 기술 스택 비교 실제 업무 범위는 어떻게 다를까? 커리어 관점에서의 차이 자주 생기는 오해와 진실 나는 어떤 역할에 더 적합할까?퍼블리싱과 프론트엔드의 개념 차이퍼블리싱은 디자인을 웹 브라우저.. 더보기 퍼블리싱이란? 비개발자를 위한 진짜 쉬운 설명 HTML? CSS? 퍼블리싱? 다 비슷비슷한 용어 같지만, 도대체 무슨 차이일까요? 여기서 제대로 알려드립니다.안녕하세요! 저는 디자인과 기획 쪽 일만 하다가 어느 날 '퍼블리셔'라는 직업을 처음 들었어요. 도대체 이 사람들은 뭘 하는 거지? 개발자도 아닌 것 같고, 디자이너도 아닌 것 같은데... 궁금해서 직접 물어보고 공부하기 시작했죠. 그 결과, 퍼블리싱이라는 영역이 얼마나 중요한지, 또 생각보다 얼마나 '우리 같은 비개발자'와 가까운 분야인지 알게 됐답니다. 그래서 이 글을 통해 저처럼 퍼블리싱이 처음인 분들께 정말 쉽게 설명드릴게요!목차퍼블리싱이란 무엇인가요? 퍼블리셔와 개발자의 차이 퍼블리싱 작업 과정 한눈에 보기 퍼블리셔가 되려면 필요한 역량은? 퍼블리싱에 자주 쓰이는 툴과 언어 나는 퍼블리.. 더보기 같이 공부하며 배우는 : 선택자?? 안녕하세요 MIN입니다. 요즘 날씨가 많이 추워졌네요. 다들 감기 조심하세요. 저는 이번에 감기에 걸려서 연휴때 집에만 있었네요 ㅠㅠ.. 그럼 오늘은 선택자에 대해서 알아볼께요. 선택자는 꼭 퍼블리싱쪽에만 사용되는게 아니라 원리를 알게 되면 다른 곳에서도 응용해서 사용 하실 수 있을꺼에요. 그럼 한번 같이 알아보로 가볼까요?? 선택자란???? 우리가 HTML 구조를 작성할때 태그에 다양한 CSS나 JS를 적용 해야 될때가 있는데 그때 어떤 태그에 값을 줄 지 해당 태그를 선택할때 사용합니다. 그럼 선택자는 어떤게 있을까요?? 유형선택자 아이디, 클래스 선택자 특성선택 그룹선택 첫번째 유형선택자란? 우리가 일반적으로 HTML구조를 사용할때 쓰는 태그를 선택해서 스타일을 주는 방식입니다. Hello Worl.. 더보기 같이 공부하며 배우는 : Display 요소 안녕하세요 MIN입니다. 오늘은 태그의 display속성에 대해 공부해볼께요. 개인적으로는 작업할때 제일 중요하면서 가볍게 생각하는 부분인거 같아요. 조금 더 자세히 들어가게 되면 블럭 요소들도 태그에 따라 사용되는게 많이 달라지기 때문에 오늘은 가볍게만 알아볼께요. 첫번째로 block 속성입니다. 제가 저번에 html은 건축과 비슷하고 했었죠?? 그런 느낌으로 이야기 하면 block속성은 방을 나타낸다고 생각해요. 우리가 사용하는 대표적인 block 태그는 p, div, ul, ol, h시리즈 등이 있습니다. https://codepen.io/trending 한번 여기서 각 태그들을 한번씩 사용해 보세요. 볼로그 글로 보는거 보다 한번 사용해보시면 이해가 더 쉬울꺼에요. 두번째로 inline 속성입니다.. 더보기 같이 공부하며 배우는 : CSS이란? 안녕하세요 MIN입니다. 오늘은 CSS에 대해 알아 볼께요. css란 HTML로 만든 구조에 다양한 디자인을 적용 시킬 수 있는 기능입니다. 예전에는 css로 배경색을 정의하고 위치를 정의 할 수 있었지만 css가 css2 -> css3 으로 넘어오면서 점점 많은 작업을 할 수 있게 변경 되었습니다. 자세한 작업들은 추후에 알아보도록 해요~ 혹시라도 궁금하신 분들은 구글링 해보시면 다양한 정보를 얻을 수 있을꺼에요. 우리가 웹사이트 Hello world 를 출력한다고 했을때 css가 없는 상태와 css가 있는 상태에서 어떻게 출력 되는지 한번 볼까요? See the Pen Untitled by piwe2004 (@piwe2004) on CodePen. 이해 하기 쉽도록 inline-style로 작성하였습.. 더보기 같이 공부하며 배우는 : HTML 구조 안녕하세요 MIN입니다. 오늘은 HTML의 구조에 대해 알아보려고 합니다. 오늘은 HTML의 구조에 대해 알아보겠습니다. 구조를 말씀드리기 전에 HTML은 우리가 컴퓨터에 폴더를 만들어 파일을 저장하듯이 브라우저에 폴더가 있다고 생각하지면 조금 더 쉽게 이해하실 수 있으실 거예요. 우리가 퍼블리싱을 할때 보면 이렇게 시작되는것을 보았을거에요. 예전에는 doctype 은 HTML페이지의 오류검사등 HTML을 의미하였는데 요즘은 잘 신경쓰지 않고 문서형식이라는 정도만 기억하시면 됩니다. html의 모든 콘텐츠를 표하기 위해 기본적으로 사용 하는 태그입니다. html태그 안에는 head와 body를 품고있어야 합니다. 그리고 html은 lang라고 언어 식별값을 넣어주셔야 합니다. 우리나라에서 사용할때는 ko.. 더보기 이전 1 2 3 다음
