Web21

• 

  [WEB] Adobe Flash Player와 HTML5 & WebGL 플래시 플레이어는 1996년에 처음으로 출시되었다. 처음에는 FutureWave Software라는 회사에서 애니메이션을 만들기 위한 소프트웨어(벡터 애니메이션을 표현할 수 있도록 지원한 제품)였다. 그러나 96년 MacroMedia라는 회사에서 FutureWave사를 인수하면서, 브라우저 상에서 동작할 수 있도록 플러그인(웹 브라우저의 일부로서 쉽게 설치되고 사용될 수 있는 프로그램을 말한다. 넷스케이프 브라우저를 통해 사운드나 동영상을 재생하거나, 기타 다른 기능들을 수행해주는 추가 프로그램들을 다운로드하여 설치하고 또 정의할 수 있도록 한 것이 그 시초이다) 형태로 바뀌었고, 이는 곧 웹 디자인 영역에서 활발하게 쓰이기 시작했다. MacroMedia사에서 ECMA스크립트 기반의 액션스크립트 (AS).. Web/HTML 2020. 11. 10.

• 

  [HTML] Doctype(Document Type)과 개방형 웹 플랫폼 HTML5 HTML은 버젼마다 제공하는 태그들이 다른데, 각 버젼에 따른 Doctype을 선언해줌으로써 HTML의 버젼을 알려준다. Doc의 Document를 HTML이라고 보아도 무방할 것이다. 그렇다면 그 종류에는 무엇이 있는가? 가장 최근 버젼인 HTML5의 선언 방법은 다음과 같다. (그 외 HTML 4.01 등 다양한 버젼을 선언하는 방법이 있지만, 검색을 통해 알 수 있는 부분이므로 다루지 않겠다) 또한 이 외에도 HTML5(발표일 2014년 10월 28일)에서 추가된 태그들을 살펴봄으로써 웹이 어떠한 측면에서 개선을 위해 노력했는지도 살펴볼 수 있다. Sementics 1) 섹션 구분 태그 기존에는 div태그로 내용들을 나누어 주었다. 그러나 컴퓨터에게 아무런 의미가 없는 태그에 불과하다. 해당 영역이.. Web/HTML 2020. 11. 9.

• 

  [CSS3] display : grid ① Grid, 배우면 뭐가 좋을까? 먼저 Flex와의 차이점에 대해서 알아보자. 우리는 Flex가 가로나 세로로 HTML 요소들을 정렬하는데 활용된다는 사실을 알고 있다. 이에 반해, Grid를 사용하면 가로와 세로를 포함한 면적에 대한 레이아웃을 짤 수 있게 된다. 기존에 Grid를 배우지 않은 상태에서는 float를 써서 화면을 구성해주어야 한다. 아래의 화면 레이아웃은 float를 활용한 레이아웃을 구성한 것이다. float를 써서 화면 레이아웃을 구성하는 것이 어려운 일은 아니다. width를 px 단위가 아니라, %로 주면 쉽게 해결할 수 있다. See the Pen 일반적인 HTML-CSS 레이아웃 설정 by joonho lee (@goldycoder) 비교를 위해 같은 작업을 Grid을 활용하여, 레이아웃을 짜보자. 각 태그에.. Web/CSS 2020. 10. 18.

• 

  [CSS] Position 속성 활용시, 주의하여야 할 점 1. Static & Relative - Position 속성이 정해지지 않으면, 기본적으로 지정되는 값이다. Static이란 말은 '정적인'이란 뜻으로 움직이지 않는 것을 의미한다. Relative와 비슷한 속성을 갖으며, 별다른 특성을 가지지 않는다. 2. Absolute - Absolute는 자신에게 적용된 정렬에 영향을 받지 않는다. 위치지정 역시, left/right/top/bottom 등을 활용하여 지정해주어야 한다. 또한, Absolute 포지션을 활용할 때에는 항상 상위 박스의 Position을 점검하는 습관을 갖아야한다. 왜냐하면 Position은 Static이 아닌, 부모 박스를 찾아 해당 박스 안에 속하여 위치가 지정되기 때문이다. See the Pen WNwgaLW by joonho.. Web/CSS 2020. 9. 18.

• 

  [CSS3] display : flex ② Flex 아이템에 적용되는 속성들 지난 시간에는 'Flex 컨테이너에 적용되는 속성들'에 대해서 알아보았다. 이번에는 컨테이너의 자식 요소인 아이템에 적용되는 속성들을 알아보자. 정해진 비율만큼 크기를 늘려, 여백 채우기 : flex-grow display: flex에 적용된 것을 보면, 여백이 채워지지 않는 모습을 볼 수 있다. 이는 flex-grow의 기본 값이 0이기 때문이다. 만약 다음과 같이 아이템 박스 1에 flex-grow: 1을 지정하면, 나머지 여백의 100% 비율에 맞춰 크기를 늘리는 모습을 볼 수 있다. 이 상태에서 아이템 박스 2에 flex-grow: 1을 지정하면, 나머지 여백의 박스1과 박스2가 각각 1:1의 비율로 크기를 늘리는 모습을 볼 수 있다. See the Pen KKzePBg by joonho lee .. Web/CSS 2020. 9. 15.

• 

  [CSS3] display : flex ① Flex 컨테이너에 적용되는 속성들 반응형 웹페이지를 만들기 위해선, 박스모델들의 너비 비율을 유지한 채 박스모델들을 한 줄로 정렬하는 작업이 필수적이다. 그러나 이는 position이나 float로 처리하기 꽤나 까다롭다. (원래 그러한 목적으로 만들어진 기능들도 아니다. float의 경우, 이미지 주변에 글귀들을 두기 위해 사용되는 속성이다. 또한 Position의 경우, HTML 요소에 차원을 부여하고 위치를 지정하기 위해 생성된 기능이다) 이럴 때 아주 유용하게 쓸 수 있는 기능이 있는데, 바로, display : flex이다!! 다만, 비교적 최근에 나온 기능이라 크로스 브라우징을 고려했을 때 고민하는 분들이 더러 있을 것 같다. 그러나 거의 모든 브라우저는 display : flex를 지원한다. (뿐만 아니라, align-con.. Web/CSS 2020. 9. 14.

• 

  [CSS] display : inline, block, inline-block 에 대해서 알아보자 웹 페이지 클론 작업을 하다보니, CSS 레이아웃에 대한 이해가 낮다는 걸 스스로 알 수 있었다. 밀접하게 관련이 있는 display에 대해 명확하게 설명하지 못하고, 그저 활용할 줄만 알고 있었기 때문이다. 각설하고, 세 요소들 간의 관계에 대해서 자세히 알아보자. 1. display란? [HTML] 인라인 요소(inline element)와 블록 요소(block element)에 대한 친절한 설명 먼저 display에 대해서 알기 전에, 인라인 요소와 블록 요소가 각각 무엇이며, 어떤 관계인지 알지 못한다면 필자가 쓴 다음 글을 참고하자. Display 속성과 각각의 요소들은 밀접한 관계를 갖고 있기 때문이다. display 속성을 통해 레이아웃에 HTML의 요소가 블록과 인라인 요소 중 어느 쪽으로.. Web/CSS 2020. 9. 11.

• 

  [CSS] Position : fixed를 활용하여, 메뉴바를 화면 상단에 고정시키는 방법 서론 윅스의 고객센터 홈페이지 웹페이지들을 살펴보다 보면, 다음과 같이 페이지의 상단에 메뉴 바가 고정된 형태의 웹페이지들이 종종 있다. 이는 홈페이지를 보는 사용자에게도 분명 큰 이점을 주는 듯 하다. 스크롤을 내려도, 메뉴바가 보이기 때문에, 자신이 원하는 영역으로 빠르게 이동할 수 있기 때문이다. 어떻게 하면, 메뉴바를 고정할 수 있을까? CSS의 Position : fixed를 활용하면 됩니다. 참고로 position:fixed는 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킵니다. 그래서 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치가 고정(fixed)됩니다. 본론 fixed 속성은.. Web/CSS 2020. 9. 10.

• 

  [웹 개발 기록기]HTML을 통해, 개인 웹페이지 만들기 컴퓨터에 대해서 오랜시간 사용하면서, 한번도 던지지 않았던 질문을 한 것은 일주일 전이었다. 웹이란 무엇인가? 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다 - 네이버 지식백과 웹을 활용하여, 개인 웹페이지를 사용해봤던 경험은 초등학교 4학년 때가 처음이었던 것 같다. 채팅 어플리케이션인 '버디버디'를 활용하면서, 자연스레 개인 홈페이지를 갖게 되었으니 말이다. 본격적으로 활용했던 건 '싸이월드'가 나온 이후였다. 그 당시 핫했던 싸이월드를 하면서, 웹 공간 상에 나의 기록을 남길 수 있다는 사실을 어렴풋이 알게 된 것 같다. 공부만 하던 고등학교 시절을 지나, 대학교에 입학한 이후로는 instagram이나 facebook 등의 SNS를 써왔다. 이제는 명.. Web/HTML 2020. 6. 6.