bingsu_-_.log https://velog.io/ 웹퍼블리셔 수강 기록 Sun, 19 Jan 2025 15:10:14 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed bingsu_-_.log https://velog.velcdn.com/images/bingsu_-_/profile/1ee4244c-3cf7-4951-b827-148c57ec2532/social_profile.png https://velog.io/ Copyright (C) 2019. bingsu_-_.log. All rights reserved. <![CDATA[웹퍼블리셔 수업 Day 9]]> https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%88%98%EC%97%85-Day-9 https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%88%98%EC%97%85-Day-9 Sun, 19 Jan 2025 15:10:14 GMT ※디자인, 코딩 레퍼런스 많이 보고 많이 따라하기※ 생각하면서 작성해보기 Best practice(모범 사례): 좋은 결과를 얻을 수 있는 방법이나 규칙

실무: soft landing (잘 적응할 수 있게 스무스하게 도와주는)

수업에서는 기초 정도만(소프트 랜딩을 위해. 시작이 쉬워야하니까) 나중에 좀 멋지고 화려한 화면 개발

실무에서 계속 공부: 훑어보기(숲)=>상세보기(나무)

예술형 it업계랑 잘 맞을 수도..

공통적인(전체적인 거)>세부적인 거 순서로 코딩하기

<body>
    <div class="quiz"></div>
</body>
.quiz {
    width: 99vw;
    height: 0;
    background-image: url("../../img/7_7_2_quiz.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* TODO: 가로세로비율:  */
    padding-top: calc(3 / 16 * 100%);
}

height 0; 생략 가능 어차피 컨텐츠 없어서 0이므로

max-width: 100% 최대 원본크기까지만 늘이기

가로, 세로 한 쪽 값만 주면 원본 비율대로 자동 설정됨

.quiz {
    width: 200px;
    border: 2px solid lightgoldenrodyellow;
    padding: 14px;
    background-color: lightyellow;
    border-radius: 14px;
}
.quiz > li {
    list-style-type: none;
    display: inline-block;
    margin-left: 14px;
}

display: inline-block; 넣으면 list-style-type: none; 안 써도 목록 점 없어져 있음

label tag for 속성 공백이어도 상관없는 이유? html은 느슨한 언어라서 다 안 채워도 동작함

보더, 마진, 패딩

커서가 두꺼워졌을 때는 insert 누르기

1개 포트폴리오(발표)=>css/피그마 이후 바로 ppt(pdf)=>이력서 첨부 1)웹제작: 무료 업로드(공짜인터넷주소) (일주일일주일 반) js/jquery(화면에 동적효과: 메뉴 내려오기 등) 두 번째 포트폴리오: 동적 효과 들어가게 만들기(일주일이주일)

와일드카드(*)-우선순위 가장 낮음 클래스가 태그선택자보다 우선순위 높음 id가 클래스보다 우선순위 높음

css 뭘 선택하느냐가 중요!

태그 선택: 별명 선택 박스 속성: 마진, 패딩, 보더 배치: 이미지 좌측/우측/중앙=>좌표 개념

input tag 가로,세로 적용되니까 인라인으로 분류하지만 정확하게는 인라인블록(줄바꿈x)

max-height 있긴한데 부모태그에 height 자식태그에 max-height 이런식으로는 잘 안 쓴대 거의 부모태그에 width 자식태그에 max-width 이런식으로 사용

목표는 크게 복지: 대기업(자식: 학비 풀) 풀스택: 스타트업 > 2/3년 => sk/lg/삼성: 영어 토익(700점) => 나머지: 신세계/롯데: 영어 없음(대기업 4년 대졸 필) 프론트: 유통/쇼핑/화장품

width: 100% max-width:100% 비교

부모태그 width값과 비례해서 자식태그 width 늘어남 width 100% 부모태그 값과 same max-width는 최대 원본크기까지만 늘어남 퍼센트 속성은 부모를 기준으로 함

부모태그에 디자인하면 자식태그도 같이 디자인 됨 근데 마진,패딩,보더는 multi-selector로 태그 다중 선택해서 디자인 해야 함

css 위에서 아래로 갈수록(코딩 윗라인>아랫라인) 덧칠되는 개념 h3{color:red;} h3{color:blue;} 아래줄에 디자인된 블루색으로 글자색 정해짐

ul에 디폴트 패딩 들어가 있음 라이브 서버-검사 열어서 확인해보기

]]> <![CDATA[웹퍼블리셔 Day 8]]> https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-Day-8 https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-Day-8 Sun, 12 Jan 2025 14:32:51 GMT github: 자격증X 엑셀, ppt, 워드, 한글, 압축(기본) 위 프로그램들 사용할 수 있을 정도로 익히기

실무에서는 복잡한 것을 단순하게 간결하게 코딩하는 게 중요함

포트폴리오 만들 때 스타일 가이드에 폰트, 행간 뭐 썼는지 넣기

css에서는 태그 안 씀

피그마할 때 디자인 시안 용어 중요 모바일 디자인 우선! 모바일>pc 단점: 디스플레이 크기가 작아서 단순 큰집에서 작은집으로 가면 다 빼야 해 작은 집에서 큰 집으로 가는 건 물건 사면 되니까

플러터: 하이브리드 언어 백엔드 기술과 관련 플러터만 배우면 안드로이드, ios 둘 다 개발 가능

디자인팁: 전체적인 윤곽(글자, 패딩, 마진)>세부디자인 공통적인 거>디테일

border-radius: 20px, 10rem, 50%; 등

거의 모든 태그에 보더, 패딩, 마진 값 줄 수 있음

202쪽 em 단위 기능 늘어나면서(태그 추가되면서) 원래 table 24픽셀했는데 table 30픽셀로 해야될 수도 있어 그러면 자식 태그들 폰트사이즈 그에 따라서 다 바꿔야함 복잡해져..

rem이 편한데(나중에 생긴 단위) 상황에 따라 em단위(상대적)가 유용할 때도 있음

반디집-여기에 풀기(폴더 만들 필요X)

/* 반응형 단위: phone/tablet/pc 시안에 사용
    =>ex) 1rem==16px, %, vw(화면가로비율)/vh(화면세로비율) */
.example {
    width: 99vw;
    height: 40vh;
    /* TODO: 배경이미지: 가로/세로 크기 필요 */
    background-image: url("../../img/7_7_1_example.jpg");
    /* TODO: 배경이미지는 기본적으로 반복됨(화면보다 작으면)
       TODO: 반복 멈춤 */
    background-repeat: no-repeat;
    /* TODO: 가로크기보다 작으면 무리하게 늘여서 이미지 덮음(이미지 훼손 가능) */
    background-size: cover;
}

height 0(컨텐츠 없어서 auto=0)으로 하고 padding-top: calc(숫자*100%);

퍼센트는 어떤 값이 전체에서 차지하는 비율을 나타내는 데 사용됨 100/100=100%

부모태그에 컨텐츠가 없어서 height에 바로 calc 쓸 수 없음 padding-top(or padding bottom)은 부모태그의 가로값 기준으로 16:9으로 비율(%)로 계산됨

px 반응형 단위 아님 padding-top(위로 늘어남)이나 padding-bottom(아래로 늘어남) 씀 padding-top은 가로크기 기준으로 세로크기를 비율로 계산해줌

16:9=99vw:x 16x=9*99vw 분모가 16

모든 태그에 스타일 속성 있음 link:css 대신에 참고하기(비추천)

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>h3 {color: orange;}</style>
 </head>
 <body>
    <h2 style="color: blue;">제주 감귤</h2>
    <h3>오렌지</h3>
 </body>

헤드에 스타일태그 쓰거나 바디에 스타일 속성 쓰기 예제 따라하고 변형해보기!

저장하기 ctrl s 매우 중요함

% 써야하는 이유는? 디바이스에 따라(다양한 화면 크기에 따라) 이미지 크기가 바뀌어야 해서

width/height 값을 안 주면 auto

<body>
    <div class="example">
        <img src="../img/7_8_1_example.jpg" alt="선물">
    </div>
</body>
.example {
    /* 가로 */
    width: 70rem;
    /* TODO: 외곽선: border: 선두께 선종류 선색깔; */
    border: 2px solid red;
}
/* TODO: 1) 카드 디자인시 박스크기만큼 이미지 크기 만들기
         2) 이미지 가로크기는 %를 이용해야함: 아니면 틀어짐 
*/
/* 자식선택자 사용법: 부모선택자 > 자식선택자 {속성:값;} */
.example > img {
    /* TODO: 최대 원본크기까지만 늘리기 */
    max-width: 100%;
    height: auto;
}
<p class="test"></p>

.test {
    background-color: blueviolet;
    height: 100px;
    width: 100px;
}
색깔 들어간 정사각형

.test {
    background-color: blueviolet;
    height: 100px;
}
색깔 들어간 직사각형(가로는 1920 화면 크기)
.test {
    background-color: blueviolet;
    width: 100px;
}
아무것도 안 생김

컨텐츠가 없을 때 height auto(기본값)=0, width auto(기본값)=화면 가로 크기 1920px

<p class="test">컨텐츠 있을 때</p>

.test {
    background-color: blueviolet;
}
가로 화면 크기 1920px 세로 글자길이만큼의 직사각형 생김
.test {
    background-color: blueviolet;
    width: 100px;
}
가로 100px, 세로 글자길이만큼의 사각형 생김
.test {
    background-color: blueviolet;
    height: 100px;
}
세로 100px, 가로 화면 크기 1920px 사각형 생김

컨텐츠 있을 때 가로값, 세로값 수치만큼 생김, 세로 auto는 텍스트 길이(이미지 원본 세로 길이)만큼, 가로 auto는 화면 크기 1920픽셀만큼

정리: 가로 auto는 컨텐츠 유무에 관계없이 화면 크기 1920픽셀만큼 세로 auto는 컨텐츠 없을 때 0, 컨텐츠 있을 때는 텍스트 길이 or 이미지 원본 세로 길이 auto = 가로 세로 중 한쪽 값 정해지면 나머지 하나는 원본 비율대로 자동 조정하겠다.

]]> <![CDATA[웹퍼블리셔 Day 7]]> https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-Day-7 https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-Day-7 Sun, 12 Jan 2025 13:00:40 GMT 8교시 종합문제(자유롭게)

중점적 css 잘해야 함, css 핵심 웹디>포토샵, 일러스트, 피그마, html, css

웹퍼블리셔>html 기본이고 css 실력 중요+자바스크립트 웹디가 만들어준 시안을 구현하는 일

스타일 가이드 웹폰트: 선정(한글, 영문) 디자이너가 웹폰트, 버튼, 입력상자 등, 테마 색깔 선정해서 웹퍼블리셔랑 개발자한테 배포함 웹디는 지휘자로서 피그마로 실제로 보여줘야 함

회사에 따라 작은 회사는 한 명이 웹디, 웹퍼블리셔 둘 다 하는 곳도 있음

font-weight: 숫자; bold or bolder or 숫자

.class 자주 사용하기

li태그에 list-style-type

li태그 각각은 서로 형제 관계 ul과 li는 부모 자식 관계

코딩은 간결할수록 좋음

작은 단위면 px, 큰 단위면 rem 단위 권장

padding(외곽선 안쪽 여백) border (외곽선) margin(외곽선 바깥 여백) 상하좌우로 적용되는데 한 방향으로만 적용시킬 수 있음 ex)padding-top, margin-left etc 하늘색=컨텐츠 width 하늘색 박스 가로 길이, height 하늘색 박스 세로 길이

.example {
    /* 가로 : px, 반응형단위: vw/vh, rem, %
             16px(웹브라우저 설정값) == 1rem
    */
    width: 10rem;
    height: 10rem;
    background-color: red;
    /* TODO: 외곽선 바깥쪽 (상하좌우)여백 */
    margin: 50px;
    /* TODO: 외곽선 속성: border: 선두께 선종류 선색깔
    선종류 solid 실선 dotted 점선 */
    border: 5px solid orange;
    /* TODO: 외곽선 안쪽 여백 */
    padding: 10px;
}

html table tag 속성 border="1" 없애고 css에서 border 값 입력하기

스터디그룹 포트폴리오: 디자인 시안 웹제작 기준: 마진/패딩 ex)p01=>10px p02=>15px

padding border left/right/bottom/top margin

웹디자이너 html, css 이해하는 사람 요구(커뮤니케이션 위해)

기술 면접: 포트폴리오에 관한 질문에 답하기

학원에서 배우는 거 열심히 숙지하기 코딩 관련 자격증X

GTQi나 영상편집 관련 자격증, 컴퓨터그래픽스운용기능사 등

목표는 크게 잡기 넓게 많이 배우는 게 이득, 취업문이 넓어지니까 그래서 내 목표는 웹퍼블리셔

웹디자이너 트렌드에 뒤처지면 안됨 디자인 트렌드 검색 요즘 트렌드: flat design. 무광 미니멀리즘

border 선두께만 웹브라우저 자체적으로 오차가 발생할 수 있다 (웹브라우저 검사에서 그래픽에 나와있는 숫자랑 vs코드에 입력한 숫자가 다를 수 있음)

우클릭-검사-html이랑 css코드 볼 수 있고 이미지로 보더, 마진, 패딩값 얼마 들어갔는지 볼 수 있음

애플: 디자인 우선 회사 제품기술이 안되더라도 무조건 만드세요 디자이너들한테 최고(디자이너 이사직)

예약어: bold, bolder, lightsalmon etc

테이블태그 디자인 할 때 border, margin, padding은 multi-selector로 css 해줘야 함

]]> <![CDATA[웹퍼블리셔 Day 6]]> https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-Day-6 https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-Day-6 Sat, 11 Jan 2025 12:55:17 GMT AI검색엔진 코딩 실무에서 활용함

구글 폰트, 네이버, 배민 등 포트폴리오에 활용하기 구글 웹폰트-search fonts-get font-get embed code-web 'import' 클릭-css파일에 import url 주소 복붙-예시에 있는 font-family 한 줄 복붙 import url 방을 예약하겠다. font-family 이 폰트 쓰겠다.

구글 폰트 사이트에서 폰트 검색 후 one value 누르면 두께 조절한 후에 임베드(복붙) 가능 다운로드 방법: 압축파일 풀기 후에 글꼴파일 설치 클릭

/* 09_google_font.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@900&display=swap');
.head {
    font-family: "Noto Sans KR", serif;
    color: blueviolet;
}
  1. html css 기본 숙지
  2. figma 디자인 설계 도구(시안) 디자이너가 시안 만들면 퍼블리셔가 웹으로 구현
  3. 팀 프로젝트 웹페이지 만들기(개인 포트폴리오) 일주일 동안

table태그 한 행만 width 설정 시 위 행과 아래 행 여백이 달라서 최대로 줄거나 늘어남에 있어서 한계가 있다. 표가 찌그러지면 안 되니까 표 크기는 css에서 조절하면 됨

디자이너, 퍼블리셔, 백엔드, 풀스택 팀으로 일하기 때문에 커뮤니케이션 중요함

nav=navigation bar=메뉴

선생님 벨로그 계정에서 피그마 내용 보기

vw,vh 단위 비율(%)이라서 반응형 웹페이지에 용이 viewport=디바이스(pc, 폰, 태블릿 등)에 따라 화면이 비율대로 조정되는 거

semantic 웹: 검색엔진 노출 잘 됨 

 <body>
    <h1>html 문서:현재 작성법(시맨틱 웹)</h1>
    <header>머리말</header>
    <nav>메뉴</nav>
    <section>
        <article>소본문1</article>
        <article>소본문2</article>
    </section>
    <footer>꼬리말</footer>
  </body>

css에서 태그 쓸 때 띄어쓰기 잘못하면 결과값 안 나옴

헥스 코드 #000000 컬러 번호

커서가 input태그 입력박스에서 깜빡깜빡 거리는 거=focus

css 마지막에 쓴 코드가 적용됨(덮어쓰기 개념)

]]> <![CDATA[웹퍼블리셔 수업 Day 5]]> https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%88%98%EC%97%85-Day-5 https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%88%98%EC%97%85-Day-5 Tue, 07 Jan 2025 15:28:13 GMT 관례적으로 label태그랑 input태그 같이 씀 for 속성? id, class와 달리 label태그를 위한 속성 id랑 비슷하게 별명을 각각 다르게 붙임

class 속성은 별명 붙이기 중복 가능하고 id는 별명 다르게 붙이는데 실무에서 관례적으로 그렇게 쓰는 거고 웹프로그램(시스템상)에서 문제는 없음

복잡한 거는 하나만 만든 후에 하나씩 늘려 나가기

span 태그 크기(width, height) 입력해도 무시됨

link:css

전자책 65쪽

css에서 폰트 디자인하기 html에서 폰트 바꾸는 거 지양!

웹디자이너/퍼블리셔 하는 일 ①디자인 시안: 사이트 첫페이지(메인 화면) A안, B안 (피그마, ppt로 제작한 거) ②사용자층 50%이상: 모바일 A안: 모바일 디자인 우선 제작 후 pc 디자인으로 확장하기=>반응형 웹 반응형 웹에서 배수(rem)나 비율(%)이 용이함.

css font-weight: bold; 볼드체 적용인데 값에 bold(예약어) or 숫자 가능

픽사베이 출처 밝혀야 하는지? 강사님은 출처 안 쓰신다는데 근데 각 이미지별로 달라서 찝찝하면 출처 밝혀도 됨

list-style-type: none; 웹디 class 속성과 list-style-type: 넌 자주 씀

와일드카드 우선순위가 낮음 와일드카드랑 태그선택자, id속성, class속성 같이 쓰면 지정한 거는 선택한 색깔로 나올 거고, 나머지 설정 안 해놓은 것들은 와일드카드 설정으로 됨

와일드카드는 문서 만들 때 초기 설정 시 일괄 적용할 때 유용함 들여내기, 내어쓰기, 맑은 고딕체, 폰트 크기 등 톤앤매너 유지를 위해

조판 부호, 테스트 글자 lorem~~

워드, 한글 폰트는 자체프로그램에서는 저작권 괜찮은데 웹페이지 적용 금지 회사에서 산 거 또는 무료 배포 폰트(구글폰트) 써야 함

img태그는 닫는 태그X

http와 https 차이점? s=secure 해킹 방지, https는 유료

SSL은 클라이언트와 서버 사이의 암호화된 연결을 위해 사용 SSL은 웹사이트와 브라우저 사이에 전송되는 데이터를 암호화하여 인터넷 연결을 보호하기 위한 것.

]]> <![CDATA[웹퍼블리셔 수업 Day 4]]> https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%88%98%EC%97%85-Day-4 https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%88%98%EC%97%85-Day-4 Tue, 07 Jan 2025 12:58:22 GMT id 별명 footer 꼬리말 header 머리말

600픽셀 해상도 화소 화면 가상의 점 600개

div 태그(디자인할 때 많이 씀) '가상의 공간'을 표시하는 태그(그 공간에 색깔 넣거나 여러 가지 효과를 주려고) 줄바꿈 내장돼 있음

부모 태그 선택하면 자식 태그도 같이 디자인 됨

#id이름 id 앞에 # 붙이기! 샵을 안 붙이면 태그가 됨 id는 별명을 의미함

class도 별명 붙이는 일종임 .hello

for 별명 붙이는 속성

html 도화지 html 먼저 만들기 css 만들기 html 파일에서 링크 걸기

css 와일드카드 일괄적으로 모든 태그에 디자인 넣겠다 와일드카드=* *{ color: blue; }

html 파일에 css 파일 링크 걸기 link:css

보통의 문서 구조 머리말-본문-꼬리말

. 현재 경로 =같은 라인(같은 선상에 있어서) ..상위 폴더

selector=선택자=>선택한다는 의미 CSS에서는 중괄호 써야 함(약속)

태그 선택자(h {}) 잘 안 쓰고 id나 class 속성을 주로 씀 css에서는 width: 100px; 단위(픽셀) 붙여야 해

color: olive(12,23,34); 함수값으로 컬러 나타냄

링크를 헤드 부분에 넣는 이유? 링크는 css를 넣는 용도밖에 없어서 관례적으로 head 안에 씀

li {
    color: grey;
    list-style-type: none;
}

list-style-type: none; ul 목록 점 없애줌

화면(웹페이지)에 보이는 것들은 body에 씀

]]> <![CDATA[웹퍼블리셔 수업 Day 3]]> https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%88%98%EA%B0%95-Day3 https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%88%98%EA%B0%95-Day3 Wed, 01 Jan 2025 08:06:11 GMT 8교시 면담 수강 목적=5인 초과 회사이면서 콘텐츠에 진심인 회사에 취업하기 진로 상담=콘텐츠 마케터 또는 웹디자이너 또는 웹퍼블리셔

총 세 달 반 중에서 두 달 반 웹 수업, 이후 한 달 영상 편집 일주일이내 철회 가능

실무에서 폴더 관리 중요함.

img 태그 width(가로), height(세로) 거의 모든 태그에 다 있음 안 쓰면 자동으로 잡힘 원본 이미지 훼손될 수 있음 가로, 세로 중 한 쪽 값만 주면 비율대로 설정 됨

빈이미지랑 랜덤이미지를 제공하는 사이트가 있음 pc에 있는 이미지 또는 이미지 사이트 주소 2가지 존재

..            상위 폴더 shift alt ↓ 줄 복사 ctrl shift k 줄 삭제 shift alt f 자동정렬(prettier 먼저 설치 돼 있어야 가능)

처음부터 모든 태그 설명x 스트레스 유발하기 때문 지금은 바디(본문)에 집중하기

속성 안 쓰면 자동으로 잡힘

input 닫는 태그 없음 인풋 태그 다음에는 br 태그 써야 함 label, input 태그 등 양식(FORM)태그는 줄바꿈 적용X p, h 태그 등 줄바꿈 자동 적용돼 있음

예제 파일 매우 중요함. 정리 잘하기. 예제 파일 활용하기.

        <input type="checkbox" checked> 좋음
        <input type="checkbox"> 나쁨
        <br />
        <br />
        <input type="radio" name="person"> 남
        <input type="radio" name="person"> 여

person, people 아무거나 위아래 똑같이 입력하기 name 속성은 백엔드와 관련 id 속성은 javascript와 관련

br태그 line break

<input type="submit">
백엔드에 데이터 보낼 때 씀

새로고침 너무 많이 누르면 성능 저하 이슈=컴퓨터 다운돼버림

column 세로(열), row 가로(행) colspan 속성 = 가로 병합 rowspan 속성 = 세로 병합

textarea 태그 카페 qna 게시판 글쓰는 칸

특수 태그   공백 < < > >

챕터가 끝나면 마무리 퀴즈 항상 있음

]]> <![CDATA[웹퍼블리셔 수업 Day 2]]> https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%88%98%EC%97%85-Day2 https://velog.io/@bingsu_-_/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%88%98%EC%97%85-Day2 Wed, 01 Jan 2025 05:45:34 GMT 실무에서 html css 할 줄 아는 웹디자이너 多 javascript 좀 어려움 할 줄 아는 게 많으면, js까지 할 줄 알면 가장 취업이 잘 됨 웹퍼블리셔를 목표로 잡기 포트폴리오 필수!

ul = unordered list li = list 순서 없는 목록(ul)을 순서 있는 것(ol)보다 많이 씀 css 배우면 ol은 써봤자 없어지므로

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>오렌지</li>
</ul>

벨로그 매뉴얼을 알아가는 중 취소선 사용하기

※ 문서 50% 파워포인트,엑셀,워드(한글) ※ 필수적으로 공부하기     업무 50%

ol = ordered list li = list

<ol>
  <li>호랑이</li>
  <li>코끼리</li>
  <li>기린</li>
</ol>

border 속성. 외곽선 굵은 글씨 테이블 제목 thead 테이블 헤드 tbody 테이블 내용

table태그 제목 내용 짝 맞추기 ex) 제목(thead) 1행 2열, 내용(tbody)도 1행 2열 커서 놓은 후 들여쓰기: tab키 (반대: shift + tab키)

<body>
  <table border="1">
    <thead>
      <tr>
      <th></th>
      <th scope:"col">월</th>
      </tr>
    </thead>
    <tbody>
      <tr>
      <th scope:"row">1교시</th>
      <td>HTML</td>
      </tr>
    </tbody>
  </table>
</body>

웹접근성 속성. scope="col" scope="row" th태그(제목)에만 달기 row 행, column 열 .. = 상위 폴더

video 파일 'mp4' 종류가 가장 유명 controls 동영상 패널(재생, 일시 정지) 동영상 크기 width 가로 설정하면 세로는 비율 대로 자동 설정됨

포트폴리오 만들 때도 픽사베이 갖다 쓰기 

<video width="300" controls="controls">
  <source src="../video/08_example/08_example.mp4" type="video/mp4">
</video>
<body>
  <audio controls="controls">
    <source src="../audio/09_quiz.mp3" type="audio/mp3">
  </audio>
</body>

막간 벨로그 매뉴얼 알아보기2 글쓰고 엔터 = 하니까 h1태그처럼 됨 스마트 헬스케어 = :의료, 보건, 건강체크 예)스마트 워치

수업 이름이 '디지털 스마트케어 콘텐츠 디자인 실무'인데 스마트케어 말고 다른 주제 정해서 포트폴리오 만들어도 됨

첫 날에는 낯가리고 간 본다고 조용히 있었지만 둘째날부터는 질문을 좀 했다. 계속 열심히 듣고 질문해야겠다.

]]> <![CDATA[느좋 시작: 웹퍼블리셔 수업 Day 1]]> https://velog.io/@bingsu_-_/%EB%8A%90%EC%A2%8B-%EC%8B%9C%EC%9E%91-%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%88%98%EA%B0%95-Day-1 https://velog.io/@bingsu_-_/%EB%8A%90%EC%A2%8B-%EC%8B%9C%EC%9E%91-%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%88%98%EA%B0%95-Day-1 Sat, 28 Dec 2024 14:40:29 GMT 2024.12.26.

혼네의 데이원 노래가 생각나네요..ㅎㅎ 각설하고 전액국비지원 직업훈련 웹퍼블리셔 수강 기록 시작할게요!

벨로그는 강사님이 첫 날에 소개해주셔서 알게됐는데 자동 저장 기능 너무 좋네요.ㅎㅎ

고용노동부 요구 사항에 수강생 평가가 있는데 만점이 너무 많다고 해서 조금 어려운 문제도 섞여 있을 거라고 강사님께 들었다. 근데 강사님이 취업하려면 평가는 상관 없고 포트폴리오 만드는 게 무조건 중요하다고 여러 번 말씀하셨다.

나의 수강 목표 첫 번째는 취업, 두 번째는 평가 만점 받기로 일단 정해야겠다.

강사님 목표는 프로젝트 2개 정도 만들기라고 하셨는데 수업 기간이 많이 길지는 않아서 될지 잘 모르겠다고 하셨다. 스터디 그룹을 만들어서 같은 주제를 선정해서 서로 도와가면서 개인별 포트폴리오가 나오게 하는 프로젝트라고 들었다.

독심술 못 하신다고 모르면 그때그때 물어보라고 부끄러운 사람은 카톡 단체방으로 질문하라고 무조건 다 따라하면 된다고 이 세 코멘트를 가장 많이 들었다.

코딩: 머리 코딩X 손가락으로 기억하기 이론 10, 실습 90% 디자이너: 포토샵, 일러스트+영상 웹퍼블리셔: 디자이너+HTML+CSS+JS js는 좀 짧게 수업(맛보기 강의) 프론트엔드: vue/react/angular(js프레임워크) 책은 보조 자료, 강의 자료는 따로 pdf파일 존재 공식 용어 지양 40분 수업 10분(복습, 응용, 질문) 종합 문제: 마지막 8교시

HTML, CSS, JS까지 할 줄 알면 취업 경쟁력이 더 생긴다고 함

전에 단순한 호기심으로 코딩 책이랑 유튜브 파이썬 강의 영상 보고 따라한 적이 있다. 비전공자여서 걱정했는데 예전 경험 덕분에 수업 내용이 많이 낯설지는 않아서 다행이었다. 실습 많은 수업을 선호해서 수업이 재미있고 강사님도 유머 있으시고 잘 가르쳐주신다. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ a 입력 후 a link 클릭 : 앵커 태그, 페이지 이동, 같은 페이지에서 이동

태그 파란색 속성 하늘색

id 속성: 태그에 이름(별명) 부여 id 속성 모든 태그에 다 있음

p 태그: 단락, 문단 sup 태그 = 위첨자 sub 태그 = 아래첨자 ins 태그 = 밑줄

br 또는 br / 태그 = 줄바꿈 슬래시 붙은 거를 좀더 표준적으로 사용함 hr / 태그 = 수평선

요새 알집 잘 안 쓴다고 강사님이 추천하신 압축 프로그램 반디집(반디소프트)

HTML5, CSS, js, jquery 코딩 기본이 영어, 공백 안 쓰고 _언더바 쓰기 웹 제작: HTML 웹 문서 실행: 웹 브라우저 엔터 키 바로 위에 원화 키는 역슬래시 최대한 단축키 활용해서 웬만한 거는 자동 생성

!+tab키 Lor 입력 tab키 > Lorem ipsum ~

open with live server 머리말 head 본문 body 꼬리말 코딩: 기본 배우고 새로운 거: 구글링 면담 있음 쉬운 책>어려운 책 실무: 있는 거 가공, 재창조 창의 10%, 재창조 90%

다양한 html ex)구글, 네이버 등 구분 방법은 택배 집주소라고 생각하기 www.고유주소

]]>