1. width: 100% 와 width: auto 의 차이점1.width: 100%의미 : width: 100% 는 요소의 내용(content)이 부모 요소의 가용 너비를 완전히 차지하도록 설정한다. 이때 가용 너비는 부모 요소의 패딩과 테두리(border)를 제외한 부분이다.1-1. 특징부모 요소의 패딩이나 테두리(border)가 있으면, 그만큼의 크기가 제외된다.자식 요소가 부모 요소의 가용 영역을 완전하게 채운다.반응형 디자인에서 종종 사용됨box-sizing의 속성에 따라 달라질 수도 있다.content-box : width는 콘텐츠 너비만 포함border-box : width는 패딩과 보더를 포함하여 전체 요소 너비를 지정2. width: auto의미: width: auto는 요소의 내용에 따..

위와 같은 이미지를 구현해보자. 위와 같이 간단하게 html 구조를 짜보자.  요소 안에 를 통해 style.css를 연결해주자. 그리고 title로 제목을 정해주자그리고 body 요소 안에는 시멘틱 태그인 article 태그로 작성해보자. article태그는 보통 기사나, 포스터 등을 할때 사용한다고 한다. 이번에는 text가 많으므로 article을 사용해보자.article 태그 안에 이미지를 연결해주고, alt의 속성을 통해 만약 이미지가 표시가 안되거나 로드가 되지 않았을 때 대신 표시할 대체 텍스트를 지정하는 것이다. 여기는 혼자서 하는거 이기에 그냥 빈 문자열로 놔둔다. 그리고 h1 태그를 해놓고 저 많은 텍스트는 어떤 것으로 담아야 할까? 라는 생각을 하게 되었다. 우리가 배웠던 것은 di..

간단하게 html의 구조와 css 스타일링에 대해서 실습해보았다.이번에 만들어 볼 페이지는 이러한 것이다.이는 사진 및 텍스트를 가운데 배치하고, 리스트는 클릭하면 다른 사이트로 이동하게 만드는 것이다.처음 구조를 이러한 식으로 잡는다그 이후 타이틀과 사진이 들어갈 Div 와 안에 텍스트를 적어보자. 이렇게 대략적인 위치를 잡아준다. div로 콘텐츠를 넣어줄 공간을 만들어주자. 그리고 중간에 ul>li*3 가 있는데, 이는 태그 안에 태그를 3개를 만들어주는 명령어이다. 그래서 위에 나온 리스트를 만들어준다.위의 예시처럼 사진을 넣어주고, 콘텐츠를 채워보자이러한 식으로 태그안에 rel 속성값을 넣어준다. 이는 이 문서가 어떤 형식인지를 정해주는 것이며, href는 Hypertext Reference..

1. HTMLHyper Text Markup Language의 약어로 웹페이지를 만들때 사용하는 언어이다. HTML은 프로그래밍 언어는 아니다. 웹페이지가 어떻게 구조화 되어있는지 정의하는 마크업 언어이다. 2. 하이퍼텍스트(Hyper Text)Hyper(초월한, 뛰어넘은)와 Text(문서)의 합성어로 기존의 문서는 책처럼 순차적으로 하나씩 접근하는 방식이었다면 하이퍼텍스트는 링크에 따라 다른 페이지로 이동하거나 동일 페이지 내 다른 위치로 이동하는 비 순차적 접근 방식이다. 3. 마크업 언어(Markup Language)태그 등을 이용하여 문서 혹은 데이터의 구조를 명기하는 언어이다.즉, 해당 문서, 데이터가 어떤 의미를 가졌는지 쉽게 알 수 있게 해준다. 마크업 언어는 정적인 언어이기 때문에 프로그래..

1. 프로그래밍 패러다임(programming paradigm)프로그래밍(prgramming)하나 이상의 관련된 추상 알고리즘을 특정한 프로그래밍 언어를 이용해 구체적인 컴퓨터 프로그램으로 구현하는 기술 패러다임(paradigm)어떤 한 시대 사람들의 견해나 사고를 근본적으로 규정하고 있는 테두리로서의 인식의 체계, 또는 사물에 대한 이론적인 틀이나 체계를 의미하는 개념을 의미한다. 프로그래밍 패러다임(programming paradigm)개발자가 프로그래밍을 위해 어떠한 '관점'을 가지고 개발을 할지에 대해서 결정을 하는데 도움을 주는 것을 의미한다. 즉 프로그래머에게 프로그래밍의 관점을 갖게 해주고, 결정하는 역할을 한다.프로그래밍 패러다임은 크게 선언형, 명령형으로 나누며, 선언형은 함수형이라는 ..

1. 노출모듈 패턴(revealing module pattern)노출모듈 패턴은 즉시 실행 함수를 통해 private, public 같은 접근 제어자를 만드는 패턴이다. 자바스크립트는 private나 public 같은 접근 제어자가 존재하지 않고 전역 범위에서 스크립트가 실행된다. 그렇기 때문에 노출모듈 패턴을 통해 private와 public 접근 제어자를 구현하기도 한다.const pukuka = (() => { const a = 1 const b = () => 2 const public = { c: 2, d : () => 3 } return public;})()console.log(pukuka)console.log(pukuka.a)// { c: 2, d: [Fu..