23일 금요일

복습하고

벤딩머신 과제

 

먼저 HTML마크업을 하려고했지만 뭔가 눈에 보이지 않으니 참을 수가 없다

 

일단 헤더 로고 부분만 이미지 따와서 배치하고

메인을 그리드로 2분할 시켰다

 

왼쪽 음료 선택 영역도 그리드 짜주고 음료 1개만 우선 가상요소를 사용해서 완성해봤다

 

24일 토요일

 

나머지 영역 html 마크업 완료

대략 사이즈 설정도 완료

 

이제 스타일만 주면 된다

 

폰트 적용 질답

Q ) 왜 @import 폰트코드를 CSS 맨위에 둬야 할까요?

저번에 1만시간에서는 맨밑에 @font-face 가 있어도 잘됬는데?!

 

A) 각각의 url을 주소창에 입력해보면

폰트 페이스는 바로 파일이 다운받아지고

임폴트는 주저리주저리 코드가 적혀있는 창이 뜹니다.

 

정리하면,

제공되는 웹폰트를 css파일로 준다→ @import

파일을 CDN(Content Delivery Network)으로 준다→ @font-face

CSS 실무 테크닉

 

browser 마다 기본 설정이 달라서 조금씩 다르게 보인다

 

custom input, select box

디자이너가 초보일 때 간혹 활성화된 버튼 이미지만 주는 경우가 있는데,

비활성화 된 이미지도 요청하면 된다

 

input checkbox custom

firefox safari 브라우저로 번걸아 보는데 정말 다르다 (사파리 못생김..)

 

  • select,option 태그를 사용하면 커스터마이징이 어렵다
  • 모바일에서는 운영체제마다 다르기 때문에 따로 커스터마이징을 하지 않는다

 

피그마 실습 버튼 만들기

https://www.figma.com/file/c4mPUK5xcqzzRVBadSu6BG/%EB%A9%8B%EC%82%AC_%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%8A%A4%EC%BF%A8_3%EA%B8%B0?node-id=4624%3A2536 

 

Figma

Created with Figma

www.figma.com

 

[깨알면접팁] 면접보는 회사가 하는 서비스를 반드시 알아야한다
ex) ...써보셨어요?
-사이트를 크롬, 사파리, 파이어폭스 등 여러 브라우저로 다 돌려봤을 때
레이아웃이 깨지는지를 확인해서 면접 때 대답한다

 

IR(Image Replacement)

ㅋㅋㅇ

  1. image 내 의미있는 텍스트의 대체 텍스트를 제공할 때(pc)
  2. image 내 의미있는 텍스트의 대체 텍스트를 제공할 때(mobile)
  3. 스크린리더 X, 마크업 구조상 필요 O
  4. 이미지가 로드되지 않았을 때 대체 텍스트를 나타낼 때
/*1*/
.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}

/*2*/
.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
  /* transparent 키워드는 IE9부터 사용 가능*/
}

/*3*/
.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

/*4*/
.ir_wa{
	display:block;
	overflow:hidden;
	position:relative;
	z-index:-1;
	width:100%;
	height:100%
}

ㄴㅇㅂ

.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

ㅋㅍ

.product-search a.search {
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 50px;
    height: 39px;
    background-position: -112px -71px;
    text-indent: -9em;
}

https://mulder21c.github.io/2019/03/22/screen-hide-text/#visibility-%EC%9D%B4%EC%9A%A9

 

접근 가능한 숨김 텍스트

퍼블리싱 작업을 진행하다보면 종종 숨김 텍스트를 사용해야 하는 상황에 맞닥뜨릴 때가 많다. 이미 여러 가지 방법들이 인터넷에 공개되어 있고 널려있지만, 아쉽게도 여전히 실제로 작업을

mulder21c.github.io

 

image sprite 기법

https://www.toptal.com/developers/css/sprite-generator/

 

CSS Sprites Generator Tool | Toptal®

CSS Sprites Generator Upload your images. (Note: Please don’t upload HUGE files. That’s not the purpose of sprites technique.)

www.toptal.com

  • 장점 : 스크린리더가 사이트를 렌더링 할 때 더 빠르다
  • 단점(면접 질문) : 용량이 너무 커 질 수 있다, 수정이 불편하다

https://www.youtube.com/watch?v=fKyLCIqWjIY

힙재현 강사님
레티나 디스플레이 대응법

PPI = Pixel Per Inchi

2배의 이미지를 준비해줘야한다 (애플;)

반응형 컨텐츠 만들기

백그라운드 사이즈 속성

  • background-size : contain
    컨테이너 전체를 덮되 이미지를 자르지 않게 유지
  • background-size : cover
    컨테이너 전체를 완전히 덮는다

https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers

 

Media container formats (file types) - Web media technologies | MDN

The format of audio and video media files is defined in two parts (three if a file has both audio and video in it, of course): the audio and/or video codecs used and the media container format (or file type) used. In this guide, we'll look at the container

developer.mozilla.org

 

video 속성

  • preload =“none”, “auto”;
    페이지를 로드할때 영상을 미리 로드할지 말지 결정합니다.
  • poster
    비디오를 내려받을 동안 혹은 영상을 재생할때까지 표시할 이미지를 지정합니다.
  • controls
    브라우저가 재생에 핋요한 컨트롤러를 제공할지 지정합니다.
  • autoplay
    파일이 다운로드가 완료되면 자동으로 재생될지 지정하는 속성입니다.
  • muted
    소리를 끕니다.
  • loop
    비디오가 끝나고 반복적으로 재생할지 지정합니다.

 

반응형 동영상 만들기

youtube video를 가져와 반응형으로 만들어야 한다면?

iframe 사용

부모 position : relative

자식 position : absolute

웨스파

 

테킷데이다.

Javascript로 만드는 [로또 번호 추첨기]

이해가 안가서 라운지에 물어봤다

 

var num = Math.random() * 45 + 1;

var ball1 = parseInt(num);

  • 저 이거 이해안가는데 그럼 1부터 46까지 아니에요? 왜 1부터 45가 되는거에요?
  • Math.random()45 => 0~44.9999999999 ~
    Math.random()45 +1 => 1~45.9999999999999~
    parseInt(Math.random()*45 +1) => 1~45입니다

    Int자료형으로 변환시 내림을 해서 그렇게됩니다!
    (parseInt를하면 소수점이하의 숫자를 자릅니다)

  • Math.random() 자체가 0 이상 1 미만의 float(소숫점 달고다니는 실수) 난수를 발생시키는 메서드(기능)이에요

    우리가 필요한 숫자는 1 ~ 45 까지여서
    0 이상 1미만의 수를 뱉어내는 Math.random()에 45를 곱해줘서
    0 이상 45 미만의 수를 뱉어내는 난수 생성기를 만듭니다.
    여기다 1을 더해줘서 1 이상, 46 미만의 숫자를 생성하는 난수 생성기가 만들어집니다.

    즉 math.random() * 45 + 1 은
    1.0000000... 부터 45.999999999 까지 만들 수 있는 기능이 됩니다.
    얘를 parseInt를 이용해서 강제로 반내림하면 1부터 45까지의 정수를 출력할 수 있습니다. 

 

반복문

  • for문
for (var i = 0; i<6; i++) {
 반복하려는 코드
}
  • while문
while (조건) {
  반복하려는 코드
}

조건문

  • if문
if (조건) {
 참일 경우
}

만약 중복이 아니라면 .push

 

.indexOf(값)

값이 있으면 위치 인덱스가 나오고,

없으면 -1

 <script>
        var lotto = [];
        for (var i = 0; i < 6; i++){
            var num = parseInt(Math.random() * 45 + 1);
            if (lotto.indexOf(num) == -1) {
                lotto.push(num);
            }
        }
        document.write(lotto);
</script>

이러면 중복된 값이 나오지 않는다는데

아.. 뭔가 50%만 이해가는 듯

 

  • 변수명.sort((a,b)=>a-b)
  • 배열 값 오름차순 정렬
    내림차순은 b-a

DOM

Document Object Model

  • function 함수이름() {}
  • getElementById
  • content.substring(0,200)

 

 

저녁 CSS 특강

 

zigzag 과제 리뷰

 

flex-item에 사용하는 속성
 

Ordering flex items - CSS: Cascading Style Sheets | MDN

New layout methods such as Flexbox and Grid bring with them the possibility of controlling the order of content. In this article, we will take a look at ways in which you can change the visual order of your content when using Flexbox. We will also consider

developer.mozilla.org

Grid

https://heropy.blog/2019/08/17/css-grid/

 

CSS Grid 완벽 가이드

CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아 ...

heropy.blog

https://developer.mozilla.org/ko/docs/Web/CSS/grid

 

grid - CSS: Cascading Style Sheets | MDN

grid CSS 속성은 shorthand property 입니다. 외재적인 속성인 (grid-template-rows (en-US), grid-template-columns (en-US), grid-template-areas (en-US)), 값과 내재적인 속성인 (grid-auto-rows (en-US), grid-auto-columns (en-US), grid-auto-fl

developer.mozilla.org

https://studiomeal.com/archives/533

 

이번에야말로 CSS Grid를 익혀보자

이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “

studiomeal.com

https://codepen.io/search/pens?q=grid 

 

CodePen Search

 

codepen.io

fr: fraction 비율

 

repeat() 함수

 

auto-fill

auto-fit

 

grid-template-areas

grid-area

--

CSS transition, transform

translate VS position

  1. 파싱
  2. 스타일 계산
  3. 레이아웃
  4. 페인트
  5. 컴포지팅

면접 아주중요

리페인팅 리플로우

--

CSS Animation 애니메이션

keyframe

아 시간 진짜 빠르네 벌써 목요일이라니!!

CSS Selector 심화
출처 : 튜토리얼로 배우는 HTML & CSS /&nbsp;맨 마지막에 있는 body>h1은 직계자식입니다. 위 이미지가 틀린 내용입니다.

1. 속성 선택자

  1. 태그[속성이름]
    a[href] {
     font-size:30px ;
    }
  2. 태그[속성이름="변수"]
    공백을 포함하지 않기 때문에 클래스(변수)하나만 가진 요소가 선택된다
    a[href="https://developmentbirdfoot.tistory.com/] {
     font-size: 50px;
    }
  3. 태그[속성이름~="변수"]
    공백을 포함해 변수를 선택한다
  4. 태그[속성^="변수"]
    변수로 시작하는 태그를 선택한다
  5. 태그[속성$="변수"]
    변수로 끝나는 요소를 선택한다
  6. 태그[속성*="변수"]
    *~= 과 다른 점은 ~은 단어를 기준으로 ~은 문자열을 기준으로 선택한다
    ex) [app] ~는app만 선택, *은 appple apps도 선택
  7. 태그[속성|="변수"]
    변수이거나 변수로 시작하면서 뒤에 바로 '-'하이픈 기호가 있는 태그를 선택한다

2. 가상 클래스 선택자(Pseudo class selector)

<ul>
 <li class="속성">1</li> <!--.foo:first-child-->
 <li class="속성">2</li>
 <li class="속성">3</li> <!--.foo:nth-child(3)-->
 <li class="속성">4</li>
 <li class="속성">5</li> <!--.foo:last-child-->
</ul>
  1. 속성:nth-child(odd)
    홀수번째 자식 엘리먼트
  2. 속성:nth-child(even)
    짝수번째 자식 엘리먼트
  3. 속성:nth-child(n)
    n번째 자식 엘리먼트 (0,1,2,3,4....)
  4. 속성:nth-child(3n)
    3번째 자식마다 (0,3,6,9,12....)
  5. 속성:nth-child(3n+1) (1,4,7,10,13)

a:visited 방문한 적이 있는 링크를 선택한다

(!!?? 사생활 침해의 우려로 브라우저에서 차단된다)

 

https://developer.mozilla.org/ko/docs/Web/CSS/:active

 

:active - CSS: Cascading Style Sheets | MDN

:active CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타냅니다. 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/CSS/:enabled

 

:enabled - CSS: Cascading Style Sheets | MDN

CSS :enabled 의사 클래스는 모든 활성 요소를 나타냅니다. 활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 있는 요소를 말합니다. 반대 상태인 비활성 요소도 존재합니다.

developer.mozilla.org

상호작용을 위한 가상 클래스

:hover 요소에 마우스를 갖다대면 적용된다

:active 요소를 실행할 때(버튼,링크)

:focus 요소에 포커스가 있을 때

:checked 라디오, 체크박스, 옵션 요소 선택했을 때

 

3. 가상 요소 선택자

::before 요소의 첫번째 자식

::after 요소의 마지막 자식

::selection 사용자가 선택, 하이라이트 된 상태의 텍스트

 

가상 클래스 선택자와 가상요소 선택자의 차이

  • 가상클래스 선택자는 콜론이 하나 : 가상 요소 선택자는 콜론이 2개 ::
    간혹 가상 요소 선택자가 1개인 경우는 레거시 브라우저 호환을 위해
  • 가상 요소 선택자는 마크업 없는 요소를 삽입
    브라우저,OS 스크린리더에 따라 가상 요소 선택자를 읽을수도 있고 안 읽을수도 있다

https://flukeout.github.io/# level11부터

 

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

https://www.w3schools.com/cssref/css_selectors.asp

 

CSS Selectors Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

CSS Combinator
  1. Descendant combinator 자손 콤비네이터
    공백으로 나타냄
  2. Child combinator 자식 콤비네이터
    > 를 사용
  3. Adjacent sibling combinator 인접 형제 콤비네이터
    +를 사용 전방 선택자 직후 나오는 후방 형제 선택자만 선택된다
  4. General sibling combinator 일반 형제 콤비네이터
    ~ 앞 요소 이후 나오는 모든 뒤 요소를 선택
Flex

만능의 플렉스

row: axis 주축 방향

row-reverse: 거꾸로

.container {
  display: flex;
  flex-direction : row;
}
.container {
  display: flex;
  flex-direction : row-reverse;
}

column: 열 방향

column-reverse: 열 방향 역으로

 

.container {
  display: flex;
  flex-direction : column;
}
.container {
  display: flex;
  flex-direction : column-reverse;
}

justify-content

Axis,Cross-Axis

align-items,align-content

flex-wrap

flex-flow

 

https://flexngrid.com/

 

flexngrid

flex, grid 코드 에디터 .container { display: flex; } .item1 { flex: 1; } .item2 { flex: 2; } .item3 { flex: 1; } .item4 { flex: 1; } .item5 { flex: 2; } .item7 { flex: 1; } .container { display: flex; } .container1 { justify-content: space-between; }

flexngrid.com

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

 

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주요 기능

developer.mozilla.org

 

숙달의 기준은 최소 10번은 해보는 것

 

https://www.youtube.com/watch?v=C8t7eHIQ9fU&t=1s

text-align

 

inline block 요소만 적용된다

 

 

block level 요소

 

inline 요소

 

 

line height 는 한줄만 쓸 때 수직 정렬하기 좋다

(폰트에 따라 여백이 달라 수직정렬이 아닌것 처럼 보일 수도 있다)

 

유연하면서 레이아웃이 깨지지 않게!

 

container는 기본적으로 line height가 1이 들어가 있다

 

vertical-align

sub: 부모의 subscript baseline 을 기준으로 한다

text-top:부모의 subscript baseline 을 기준으로 한다

middle은 쓸모가..?

 

text-overflow

text-overflow :container에 overflow:hidden, white-space:nowrap 속성이 같이 사용되어야 합니다.

말줄임 코드는 언제쓰냐?

데이터가 없을 때

글자수가 많을 때

모바일에서 글씨가 잘릴 때

 

https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp

 

CSS Overflow Module Level 3

Abstract This module contains the features of CSS relating to scrollable overflow handling in visual media. This level is focused on completing a precise specification for the existing overflow features, including the overflow property and its longhands; l

www.w3.org

-webkit-line-clamp의 두번째 속성을 none으로 하면 ellipsis가 풀립니다

 

relative 내가 기준

position : absolute

부모요소에 position이 없으면 최상단의 부모요소를 찾아 부모를 기준으로 움직인다

 

position : fixed

 

position : sticky

가까운 부모요소에 달라붙기 때문에 조상에 scroll이 있어야 한다

 

z-index

부모는 자식 앞으로 나올 수 없고 자식은 부모 뒤로 가는 게 가능하다

 

Float

inline요소들은 float 된 요소들을 알아본다

 

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

 

Block formatting context - Developer guides | MDN

A block formatting context (BFC) is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements.

developer.mozilla.org

 

 

특강

 

typography

 

옛날 활자레서 줄사이의 간격을 띄울 때 사이에 납을 대고 활자를 찍었는데

납이 곧 Lead 그래서 leading area가 되었다

 

CSS에선 반을 나눠 위아래로 Half Lead가 된다

줄과 줄 사이가 만나 한줄이 된다

 

 

마진을 차지하는 공간이라고 생각해보자

마진을 마이너스로 주게되면 이미지는 그대로 보이지만

차지하고 있는 공간은 줄어 들어있다

 

https://www.youtube.com/watch?v=OVaKTdFe5Bk

https://youtu.be/8SJKAMWpe8Y

 

{ margin: 0;

padding: 0;

}

초기화 꼭 먼저 하기

 

와 미쳤다 오늘 너무 피곤하다 일단 일찍잔다

<오전,오후 class = "이호준 강사님 Reset CSS, 공백처리, 주석 및 벤더프리픽스, CSS Selector, 선택자 우선순위, Box Model">

 

Reset CSS

 

브라우저마다 설정이 다르기 때문에 모든 설정을 초기화 시켜주는 CSS이다

 

CSS Tools: Reset CSS

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter

meyerweb.com

 

Normalize.css: Make browsers render all elements more consistently.

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

necolas.github.io

 

1만 시간의 법칙 페이지 간단하게 마크업
적정시간은 10분인데 20분을 주셨다
  1. 문제점
    난 다 못했다
  2. 원인 파악
    손이 느렸다, 어떤 순서로 할지 조금 막막한 감이 있어서 생각하는데 시간이 소요된다
  3. 해결방안
    익숙해지도록 혼자 많이 연습해야한다
  • 모달은 맨 마지막쯤에 작성한다

공백처리, 주석 다행히 아는 내용

 

벤더프리픽스 Vendor-Prefix

크로스 브라우징을 위해 레거시 브라우저를 지원해야하는 점도 잊지말기

https://autoprefixer.github.io/

 

Autoprefixer CSS online

include comment with configuration to the result Select result You can also see which browsers you choose by filter string on browsersl.ist Autoprefixer online — web repl for original Autoprefixer. It parses your CSS and adds vendor prefixes to CSS rules

autoprefixer.github.io

 

CSS Selector

<--수정예정

캐스태이딩

타입선택자의 우선순위가 높아서

 

선택자 우선순위

 

style적용시 우선하는 것

id>class>tag

--->

 

https://flexboxfroggy.com/#ko

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

https://flexngrid.com/

 

flexngrid

flex, grid 코드 에디터 .container { display: flex; } .item1 { flex: 1; } .item2 { flex: 2; } .item3 { flex: 1; } .item4 { flex: 1; } .item5 { flex: 2; } .item7 { flex: 1; } .container { display: flex; } .container1 { justify-content: space-between; }

flexngrid.com

CSS Box Model

 

오늘 솔직히 집중 잘 못함

체력 탓일까?

 

연휴동안 할 것

  • 인프런 인프콘 보기
  • 일만시간의 법칙 페이지 과제_깃허브 주소와 깃허브 페이지 주소 공유
  • CSS 과제 확인
  • 30분 요약강좌 HTML, CSS, JS, SPA 까지 쭉 훑어보기
  • 종찬 강사님 유튜브 강의

 https://youtu.be/KYo62fhaR7M

https://youtu.be/-aOLzc7C3QU

https://youtu.be/syOzYMWy6TE

 

<오전 class = "이호준 강사님 Embedded content">

 

<iframe> 중요한 옵션! 크롬같은경우는 auto play가 막혀있어서 autoplay 옵션이랑 mute옵션을 같이 사용해야 자동재생이 된다

<audio>

<vidio>

https://semiconductor.samsung.com/kr/support/tools-resources/dictionary/bits-and-bytes-units-of-data/?awc=18739_1662510266_a84ccee6688a44f70015231caf7bed72&cid=at_pd_affiliate_none_none_none_none_none_online-shop_none

Forms

크게 세개로 나누는데, 서버가 더 많을 수도 있고 세개가 하나 일 수도 있다

  • Server :  서빙_24시간 돌아가는 컴퓨터, 대부분 IP 연결
  • Web Server : 정적 파일(잘 바뀌지 않는 메인 화면의 요소들)을 서빙_PHP와 같은 프로그래밍 언어도 처리하긴 합니다
  • App Server : 두뇌 역활
  • DB : 데이터 저장_이미지와 같은 경우에는 이미지 경로만 저장합니다 (빨리 불러오기 위해)
    이미지는 보통 스토리지에 저장되어 있다
  • API Server : 카페에 카운터 직원이다. 직접 커피를 내릴 필요는 없다

API는 손님(프로그램)이 주문할 수 있게 메뉴(명령 목록)를 정리하고, 주문(명령)을 받으면 요리사(응용프로그램)와 상호작용하여 요청된 메뉴(명령에 대한 값)를 전달합니다.
쉽게 말해, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있습니다.

 

https://brunch.co.kr/@operator/65

 

API란 무엇일까? API 쉽게 이해하기

API | API, 쉽게 이해하기 API란? “API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을

brunch.co.kr

로컬
단점
: 트래픽 확장이 어려움, 서버 확장이 어렵고, 들어오는 트래픽 제한(대역폭 bandwidth의 문제), 정전(클라우드 서버 같은 경우 UPS)
장점 : 비용(전기세 + 인터넷)
클라우드
단점
: 비용
장점 : 서버 확장,이전이 쉽다. IP를 할당 받거나, 도메인 연결하기 쉽고, HTTPS 인증도 쉽다
<body>
  <form action="012.html" method="">
    <input type="text" name="id">
    <input type="password" name="pw">
    <button type="submit">로그인</button>
  </form>
</body>
 

코드를 실행 했을때 주소창을 보면 ?가 뜬 것을 볼 수 있다

id와 pw를 입력하면?

물음표 뒤로 키값이 입력 된 것을 볼 수 있다

 

method에 POST 방식을 입력해 주면 주소창에 아무 값이 뜨지 않는다

 

  • GET : URL로 데이터를 전달할 때 사용한다
    file 같은 큰 파일은 GET으로 전송하지 않는다
    id와 pw 같은 민감정보는 전송하지 않는다
  • POST : 패킷 안에 데이터를 넣어 전달할 때 사용합니다
    민감하거나 큰데이터를 전송할 때

 

  • 클라이언트 ↔ 서버
  • 프로토콜 ex)국가별 언어
    http://www.paullab.co.kr
    https://www.paullab.co.kr
  • ait shift 아래키 : 현재 코드 복사
  • 영상 배속 하는 코드(콘솔창ㄱㄱ)
    document.getElementsByTagName("video")[0].playbackRate = 2.5;

 

Tabular data

 

https://github.com/paullabkorea/FrontendSchool_1/tree/main/html

 

GitHub - paullabkorea/FrontendSchool_1

Contribute to paullabkorea/FrontendSchool_1 development by creating an account on GitHub.

github.com

 

<<!--로그인, 약관동의, 

17,18 파일 참고 수정예정-->>

 

https://summernote.org/

 

Summernote - Super Simple WYSIWYG editor

Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.

summernote.org

https://ui.toast.com/tui-editor

 

TOAST UI :: Make Your Web Delicious!

TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud.

ui.toast.com

 

<<!--021파일 참고 수정예정-->>

  1. from에 제출되는 data를 JavaScript로 수정하는 일은 가능하면 하지 않는 것이 좋습니다.
    input으로 해결할 수 있어요
  2. from에 없는 데이터를 추가하고 싶다면 hidden으로 input 하나 더 만들어 value를 JavaScript로 추가하는 방식을 사용하세요

 

<023파일 참고 수정예정

col(umn) 컬럼을 꾸며주기 위해 colgroup 컬그룹을 쓴다-->>

 

네이버 메일을 보면 테이블로 구성되있다 왜그럴까?
멘토님이 실무에서 뉴스레터를 제작했는데
아웃룩 툴 도구 때문인건지 여러 메일 관련 툴에서 깨지는 현상이 발생해서
계속 옛날 방식인 테이블 레이아웃형태로 진행되는것 같다한다

 

https://webisfree.com/2015-10-12/[%EC%9B%B9%EC%A0%91%EA%B7%BC%EC%84%B1]-table%EC%97%90%EC%84%9C-scope-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 

 

[웹접근성] table에서 scope 속성 사용하기

웹접근성을 위해 사용하는 코딩기술 중 하나가 바로 table에서 scope 속성을 이용하는 방법입니다. scope 속성은 테이블의 th 또는 td 등의 해당 셀에게 사용하며 컬럼(column)인지 행(row)인지의 여부를

webisfree.com

 

CSS

 

셀렉터와 프로퍼티는 외우자

  • 셀렉터: 어떤것을?
  • 프로퍼티: 어떻게 하고싶어?
  • 벨류: 얼만큼?

 

폰트 트래픽 문제

  1. 잘 사용되지 않는 폰트는 이미지화
  2. 많이 사용되지 않는 폰트는 경량화
  3. 많이 사용되는 폰트는 CDN을 사용하기 보다는 내부 API 서버나, 로컬 서버에서 서빙

 

<!--수정예정CDN: Content delivery network

 

호박을 만들기 위한 기초 keyframes-->

 

포트폴리오를 만들 떄 노션이 깨질 수도 있어서 안좋아하기도 한다

pdf로 할 것을 추천하고 이력서를 웹으로 만드는 건 가산점이 될만하다

 

<저녁 class = "이종찬 강사님 CSS특강">

 

  1. 전체적인 덩어리를 보고 클틀을 잡아야한다
  2. 고로, 메인 컨텐츠가 될 여우 이미지와 텍스트를 한번에 wrapper로 잡아준다
  3. 클래스명은 수정될 때는 고려해 구체적으로 fox까진 아니더라도 animal정도로 한다
    (너무 일반화하지도 않으면서 유니크하게)
  4. 색 입히기
  5. vertical-align : 으로 이미지와의 공백을 없애준다
  6. 그라운드 배경으로 잔디를 넣어준다
  7. 전체배경을 넣는다
  8. 모서리 둥글게 한다
  9. 그림자처리 한다
  10. 끝!
  11. 유지보수_repeat-x; , display : block;

https://camp.veamcamp.com/example/flash/

 

기억제거기

 

camp.veamcamp.com

 

마진 겹침,병합 현상

 

블럭레벨 엘리먼트끼리 인접해있는 상하단 마진은 의도적으로 겹치게 된다(겹침은 큰쪽으로 일어난다)

 

https://youtu.be/7oOai_rOnuI

https://youtu.be/H7teKNwV-Bk

도서 추천

  • SMACSS
  • 설계실전CSS

아 넘 웃기당 재밌었다

 

할 것

오늘 중간중간 혼이 나갔던 것 같다

놓친부분 다시 메꾸기ㅠ,ㅠ

 

지난번 과제 코드를 수정?다시 짜보고싶다 (된다면 여러개 배치도)

종찬강사님의 유튜브 조회수 올려드리기..가 아니라 영상보고 공부하기^^

 

내일 우리조 간단 회고 타임이 있다

발표할 것 미리 정리해놔야지..근데 시간이 다 어디로 갔지??

<오전 class = "한재현 강사님 Text-level semantics">

Text-level semantics(텍스트 레벨 요소)의 특징
  1. 가용 가능 범위만큼 영역을 점유한다. 
  2. 자식으로 Sections, Grouping Contents를 배치할 수 없다.

 

<br> 줄 바꿈

 

<-- 주석을 남길 때 -->

  • 협업시 코드에 대한 설명이 필요할 떄
    ex) 모듈,클래스의 이름과 설명
  • 포트폴리오 만들 때 보는 사람을 위해 주석을 필히 꼼꼼하게 달아 놓자
    (사람을 뽑을 때 이 사람이 얼마나 협업 능력이 있는지 보기 때문에)

 

<wbr>

https://developer.mozilla.org/ko/docs/Web/CSS/word-break

 

word-break - CSS: Cascading Style Sheets | MDN

CSS word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/CSS/white-space

 

white-space - CSS: Cascading Style Sheets | MDN

CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다.

developer.mozilla.org

 

CJK언어의 word-break 속성은 기본값이 break-all이다

(CJK언어= 중국어, 일어, 한국어)

 

<a>앵커

<a href="경로">

 

href=Hyper reference

책처럼 하이퍼 텍스트와 하이퍼 텍스트를 이어주는 링크이다

 

  • 검색엔진이 페이지를 분석할 때 JS는 보지않고 HTML 태그만을 보고 판단하는데,
    하이퍼 레퍼런스가 없으면 웹에이전트가 이 앵커가 어디로 향하는지 알 수 없기 때문에 문법적 오류다
  • "클래스 명"도 스크린리더가 읽어주지 않는다.
    alt 에 자세한 설명을 해주는게 친절한 웹페이지가 되겠다
  • 타겟 = 속성 = 어트리뷰트 attribute

 

 

# 해쉬 링크

해쉬된 페이지 내 이동

 

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

 

scroll-behavior - CSS: Cascading Style Sheets | MDN

The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.

developer.mozilla.org

 

<b> 의미가 없으니까 쓰지말자

<strong> b태그처럼 글씨를 굵게 만들어 주면서 강조의 의미가 있다

 

<i> Italic  기울임, 전문용어, 소설이라면 등장인물의 생각과 같이 주위와 구분해야하는 부분

<em> 기울임, 강조의 의미

 

<dfn> 정의하는 용어(부모가 p,dt,dd,section 요소일 경우 여기에 대한 설명으로 간주한다)

 

<abbr> MZ세대 태그 약자를 나타낼때 쓴다

 

<sup> <sub> 윗첨자와 아랫첨자 ex)화학식,수학 제곱 표현

 

<span> 줄바꿈, 의미없이 묶어주어야할 때, div 처럼 최후의 수단으로 쓴다


<오후 class = "한재현 강사님 모두의HTML CSS 페이지 과제 코드 리뷰">

https://fontawesome.com/start

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

https://getbootstrap.com/docs/4.0/components/carousel/

 

Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

getbootstrap.com

  • 캐러셀 carousel 인디케이터 indicator
  • <address>는 꼭 주소 뿐만아니라 이 사이트의 주체가 되는 연락처도 된다
  • Font Awesome 아이콘을 폰트 형태로 제공해 주는 사이트
  • 무조건 크고 굵다고 제목은 아니다
    전체적인 내용을 보고 판단하여 제목<h1>을 정한다
  • <ol start="10" reversed> 10부터 거꾸로 표현된다
  • 피그마 사이트에서 Inspect contant

  • 슬라이드의 내용을 먼저 파악한 후 이전,다음 슬라이드 보기 버튼 코드를
    배치해줌으로서 스크린리더 쓸 때 잘 파악 할 수 있도록 한다

<오후 class = "이호준 강사님 Embedded content">

Embedded content

<img src="" alt=""> source alternative text

 

이미지

  • 상업적 용도 사용 가능
  • 출처 안 밝혀도 됨
  • 사업적 용도로 사용하여 돈을 벌었는지가 주요 쟁점
  • 사용하지 않는 것을 권고

폰트

  • 무료폰트(개인 무료폰트, 상업 용도 무료 폰트)
  • 대기업 무료 폰트(한글은 제외 내용증명 날라온다)
  • 저작권 꼭 확인하고 사용하기

X 서술자 화소 window.devicePixelRatio

서술자 이미지 넓이, x서술자와 쓸 수 없다

size 속성

<picture> 이미지 크기가아니라 아예 다른 포맷의 이미지로 보여줄 수 있다

media 속성

해상도에 따라 '다른 이미지'를 보여주고 싶을 때에는 picture를, 같은 이미지인데 해상도에 따라 더 높은 해상도 이미지를 보여주고 싶을 때에는 srcset을 사용합니다

https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

 

반응형 이미지 - Web 개발 학습하기 | MDN

이 글에서 우리는 반응형 이미지(Responsive images)의 — 해상도, 스크린 크기 등이 다른 수많은 기기들에서 정상적으로 표시되는 이미지 — 개념과 구현을 위해 HTML에서 제공하는 도구에 대해 배울

developer.mozilla.org

  • 절대경로 : 현재 파일 위치에 상관없이 열 수 있는 경로
  • 상대경로 : 나(지금 열려있는 파일)기준

window.innerWidth

 

type 속성

  • 회사 컨벤션에 따라 사용하지 않는 태그들도 있다
  • 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신기술을 제공하는
    크로스브라우징 (브라우저를 넘나드는) 기법을 ‘점진적 향상기법' 이라고 한다

 

이미지 포맷의 종류

  • GIF(Graphics Interchange Format)
  • JPG/JPEG (Joint Photographic Expert Group image)
  • PNG (Portable Network Graphics)
  • SVG (Scalable Vector Graphics)
  • WebP (Web Picture Format)
  • AVIF (AV1 Image File Format)

이미지가 많을 경우 이미지 압축을 하기도 한다

 

<iframe>

  • 페이지에 유튜브 영상을 띄울 때 많이 사용된다
  • 해킹의 위험이 있다

https://developer.mozilla.org/ko/docs/Web/Media/Autoplay_guide

 

미디어 및 Web Audio API 자동 재생 가이드 - Web media technologies | MDN

페이지가 로드 되자마자 소리(또는 소리가 나는 영상)를 자동으로 재생하는 것은 사용자에게 별로 유쾌한 경험은 아닐겁니다. 미디어 자동 재생이 유용하려면 꼭 필요한 경우에 한하여 조심스

developer.mozilla.org

 

<audio>

<vidio>

내일 한번 더 정리해주시기로 했다

 

연휴 때 심심하지 말라고(?) 공부할 강의들을 엄청 뿌려주셨다

 

공부할 것

피그마 사이트보고 마크업

30분 요약강좌 시즌1(HTML,CSS_무료) https://inf.run/7rTK

 

[무료] 2022 30분 요약 강좌 시즌 1 : HTML, CSS, Linux, Bootstrap, Python, JS, jQuery&Ajax - 인프런 | 강의

이 강좌는 코딩을 처음 하시는 분들에게는 빠르게 훑을 수 있는 강의가 될 것입니다. 이미 코딩을 하시는 분들에게는 복습을 빠르게 할 수 있는 강의가 될 것입니다. 이 강의를 통해 자신감을 얻

www.inflearn.com

30분 요약강좌 시즌4(GitHub_무료) https://www.inflearn.com/course/30%EB%B6%84-%EC%8B%9C%EC%A6%8C4-%EA%B9%83%ED%97%88%EB%B8%8C

 

[무료] 30분 요약 강좌 시즌4 : 알잘딱깔센 GitHub - 인프런 | 강의

알아서! 잘! 딱! 깔끔하고! 센스있게! 정리하는 GitHub 핵심 개념 책의 무료강의입니다. 해당 책과 Notion 링크도 무료로 다운로드 받을 수 있습니다. 비영리 프로젝트로 교재활용도 허락없이 가능합

www.inflearn.com

1만시간의 법칙 : https://inf.run/zzx6

 

[무료] <1만 시간의 법칙> 웹 페이지 제작하기 - 인프런 | 강의

제주코딩베이스캠프의 무료 강의가 돌아왔습니다!! 함께 1만 시간의 법칙 서비스를 만들어보고 Github에 배포까지 해봐요!! :) 아무것도 모르신다고요? 괜찮습니다. 이 강의에 모두 준비되어 있어

www.inflearn.com

견고한 HTML, CSS : https://www.inflearn.com/course/%EA%B2%AC%EA%B3%A0%ED%95%9C-%EA%B8%B0%EB%B3%B8%EA%B8%B0-html-css

 

견고한 기본기 HTML&CSS - 인프런 | 강의

우리는 HTML, CSS를 잘 알아야 견고한 실력의 프론트엔드 개발자가 될 수 있다고 생각합니다.✍ HTML과 CSS의 종류부터 실무 활용까지, 이 강의로 언어를 올바르게 사용하는 방법을 배울 수 있습니다

www.inflearn.com

정규표현식 : https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D

 

정규표현식 : Python으로 톺아보기 - 인프런 | 강의

듣기만 해도 정규표현식이 이해되는 신기한 강의! 포기 금지! 미루기 금지! 자, 지금 해봅시다!, - 강의 소개 | 인프런...

www.inflearn.com

Notion 강의 : https://www.inflearn.com/course/%EB%85%B8%EC%85%98-%ED%85%9C%ED%94%8C%EB%A6%BF-%EA%B0%95%EC%9D%98

 

직접 만드는 노션 템플릿 BEST 7선 - 인프런 | 강의

메모혁신 노션(notion)의 기초부터 템플릿 제작까지 단 한 강좌로 노션 사용하기!, - 강의 소개 | 인프런...

www.inflearn.com

웹 접근성 강의 : https://www.boostcourse.org/web201

 

웹 접근성 이해

부스트코스 무료 강의

www.boostcourse.org

하버드 CS 강의 : https://www.edwith.org/cs50

 

[해외명강] 컴퓨터 과학 교양 강좌: CS50 강좌소개 : edwith

- 커넥트재단

www.edwith.org

코딩인터뷰를 저격하는 JS 스나이퍼 양성학교 https://inf.run/tALx

 

코딩인터뷰를 저격하는 JS 스나이퍼 양성학교 - 인프런 | 강의

코딩인터뷰를 앞두고 계신다구요? 제대로 찾아오셨습니다! 평소에 이해가 잘 가지 않거나, 들어도 들어도 헷갈리는 자바스크립트 개념들을 모아모아 함께 파고드는 시간을 마련했습니다 :) 면

www.inflearn.com

CS 강의 : http://www.kocw.net/home/cview.do?cid=3646706b4347ef09 

 

운영체제

운영체제는 컴퓨터 하드웨어 바로 위에 설치되는 소프트웨어 계층으로서 모든 컴퓨터 시스템의 필수적인 부분이다. 본 강좌에서는 이와 같은 운영체제의 개념과 역할, 운영체제를 구성하는 각

www.kocw.net

 

 

<오전일과 class = "스프린트 회고 첫 시간">

 

회고 스프린트는 우테코(우아한 테크 코스) 프론트엔드 교육과정을 담당중이신 임동준 강사님이 진행해주셨다

 

함께, 밝게, 나답게 성장하는 ‘환경’을 만드는 메이커준입니다.

👋🏼 밝음의 아이콘 메이커준 초간단 소개

www.makerjun.com

 

여러분이 생각하는 개발자로서 성장을 잘하기 위해 무엇이 필요할까요?

꾸준함, 인내, 체력, 계속 공부하기, 확실한 목표, 피드백 받는거 두려워하지 않기, 깊이파기, 소통, 자기 반성, 끈기, 업계의 성장에 대한 고찰, 엉덩이 무겁게 오래 앉아 있기, 적극적인 자세, 유연한 사고, 질문하기, 자만하지 않기, 강철 손목, 비싼 의자, 알고 넘어가기

 

이런것들을 잘하고 있다는 것을 우리는 무엇을 통해 알 수 있을까요?

타인의 피드백, 기록, 롤모델과 비교, 결과, 테스트, 메타인지

 

노션페이지에 테이블을 만들어 일주일간 각자 배우고 느낀점을 회상했다

 

대체로 느끼는 게 다 비슷했다

 

특히 나는 무슨일이 있어도 TIL작성하기로 마음먹었다!

 

  1. 내가 생각하는 과정을 마무리했을 성장하고 싶은 목표 3가지 (구체적인 장면을 떠올리면서 작성)
  2. 해당 목표를 달성했음에도 불만족스러운 경우 2~3가지
  3. 해당 목표를 달성하지 못했지만 만족스러운 경우 2~3가지

 

목표를 좀 더 현실적이고 구체적으로 정할 수 있는 방법이라 좋았다

 

<오후일과 class = "한재현 강사님과 HTML Markup 실습">

 

Semantic 시멘틱

 

웹에이전트, 컴퓨터(검색엔진이)가 이해 할 수 있게 의미있는 마크업을 해야한다

 

시멘틱한 태그를 사용 할 경우 검색엔진이 사이트를 분석하기도 쉽다

 

https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko&visit_id=637979483710948537-736098899&rd=1 

 

SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google Developers

검색엔진 최적화의 기본사항에 관한 지식만으로도 눈에 띄는 효과를 얻을 수 있습니다. Google SEO 기본 가이드에서 기본적인 검색엔진 최적화에 관해 간략히 알아보세요.

developers.google.com

 

스크린리더가 마크업을 작성했을 때 어떤식으로 반응하는지 보면 좋다

 

(시각장애인들에게 너무 유용한 기능이다

세상을 이롭게 하는 코딩이라니 정말 멋지다)

 

큰 회사의 경우 내부적으로 접근성 관련 팀이 검사를 해본다고 한다

 

지난 시간과제는 삼성과 동물의 숲 페이지 섹션 나누기였다

 

반복해서 나오는 개념은

 

HTML 코드를 짤 때 필요없는 마크업 하지않기!

 

즉, 시멘틱한 마크업을 해야 한다는 것이다

 

면접시 분명히 이 코드를 왜 이렇게 짰는지 질문이 들어온다 한다

 

코드를 짜보고 난 뒤에 내가 짠 코드를 설명할 줄 알아야겠다

 

  • 섹션의 제목은 하나만 하는게 깔끔하다
  • 아티클은 다른 페이지에 나와도 어색함이 없는지 확인해본다 (페이지내에 의존성이있는가)
  • copyright 부분은 small 태그를 사용한다
  • 알림은 ul이 아니라 ol이다
  • 시간을 나타내는 tme 태그가 있다

모듈화=나중에 재사용할 수 있는 구조

 

나중에 페이지가 여럿생기거나 할 때에 큰 틀이 되어 줄 구조를 뜻한다

 

이제 VSCode로 대강작성해본다

음,따라가다가 놓쳤다ㅋㅋ

 

공부할 것

  1. 삼성 홈페이지 코드 작성해보기
  2. 지난번 과제들 다시 마크업

+ Recent posts