Minwoo Dev.

위쪽이 원래 네이버 웹페이지의 모습이고 아래쪽이 내가 HTML과 CSS로만 구현한 네이버 웹페이지다. 원래는 HTML/CSS는 별 거 없다고 생각하고 무작정 클론코딩에 뛰어들었는데 한번에 이해하기 어려운 부분이 많았다. 클론코딩이라고 작성한 코드에는 네이버 웹페이지의 HTML/CSS코드들을 베껴와 내 것이 아닌 코드들로 이루어져 있어서 자꾸만 나를 속이는 기분이 들었다. 군대를 전역하고 배우려는 의지와 열정이 타오르고 있다. 그러던 와중에 떠오른 것이 이대로 말만 떵떵거리다가는 알맹이가 비어있는 상태가 될 거 같았다. 정말로 성공이란 걸 하려면 어떤 것이 필요할까 고민하던 중 실질적으로 내가 프로젝트를 오로지 내 힘으로, 내가 만든 코드들로 엮여내야 내 프로젝트로써의 가치를 가진다는 생각이 들었다. 그래..

Holy Grail Layout을 이번에는 flex가 아닌 float를 이용하여 구현해보았다. Header Web C/C++ Java python 애플은 이번 조치가 애플워치9과 애플워치 울트라2에만 적용된다고 설명했다. 혈중 산소 측정 기능이 없는 애플워치SE 모델은 계속 판매될 예정이다. 애플워치 주요 모델 판매 중단은 혈중 산소 측정 기술 특허를 둘러싼 의료기술회사 마시모(Masimo)와 특허 분쟁 때문이다. 지난 10월 말 미 국제통상위원회(ITC)는 애플이 의료기술업체 마시모의 특허를 침해했다고 최종 결정하고, 애플워치 일부 모델의 미국 내 잠정적 수입 금지 조치를 명령한 바 있다. 해당 조치는 조 바이든 미국 대통령이 12월 25일까지 ITC의 결정을 재검토하도록 지시할 수 있으나, 과거 대통..

Holy Grail Layout은 많은 웹 사이트에서 사용되고 있는 기본적인 구조입니다. 예전에는 CSS에 기능들이 많지 않아 Holy Grail Layout을 구현하는 것이 굉장히 어려운 것으로 여겨졌으나 현재는 많은 CSS 기능들이 나와 비교적 손쉽게 이 Holy Grail Layout을 구현할 수 있게 되었습니다. 이번 게시글에서는 Holy Grail Layout을 display : flex를 사용하여 구현하였습니다. HEADER Web C/C++ Java python 애플은 이번 조치가 애플워치9과 애플워치 울트라2에만 적용된다고 설명했다. 혈중 산소 측정 기능이 없는 애플워치SE 모델은 계속 판매될 예정이다. 애플워치 주요 모델 판매 중단은 혈중 산소 측정 기술 특허를 둘러싼 의료기술회사 마시모..

position : absolute absolute는 '절대적인' 이라는 뜻을 가지고 있다. absolute 속성값은 position : static이 아닌 조상을 찾아 그 조상을 기준으로 움직인다. 조상(부모들) 값들 중에 position 속성값이 기본이 아닌 조상이 없다면 제일 상위 태그인 를 기준으로 위치가 정해진다. 예시를 보자. box1 box2 mini box3 위 코드에서는 position 속성값을 변경한 부모가 없다. 따라서 mini는 가장 상위태그인 태그를 기준으로 정해진 위치만큼 이동할 것이다. 결과 position : absolute를 사용하면 부모자식관계에서 벗어난다. 따라서 적용된 요소는 독립적으로 바뀌게 된다. 결론적으로 부모 요소에서의 공간이 사라지고, 콘텐트의 크기에 맞는 만..

CSS에서 콘텐츠의 위치를 지정해주는 요소에는 position이 있다. 그 중에서 relative, static에 대하여 설명하겠다 position : static 따로 지정해주지 않은 콘텐츠라면 기본적으로 position : static으로 설정된다. 기본값으로 설정되어 있기 때문에 따로 적어주지 않아도 된다. static(정적)인 상태를 의미한다. position : relative 보통 콘텐츠의 위치를 이동시키기 위해 많이 사용한다. 원래 위치에 대해 상대적으로 움직한다는 뜻이다. box1 box2 mini box3 위 코드에서 mini 콘텐츠를 position:relative 를 사용하여 위치를 이동시켰다. left:100px의 의미는 포지셔닝을 relative로 바꾸었으니 왼쪽을 기준으로 100..

css에서 선택자를 사용하다 보면 두 개 이상의 요소를 선택자로 사용하는 것을 본 적이 있을 것이다. 그런 것들은 대개 결합자(Combinaters)로 사용된 것이다. CSS 결합자의 종류 자손 선택자(Descendant Selector) 자식 선택자(Child Selector) 인접 형제 선택자(Adjacent Sibling Selector) 일반 형제 선택자(General Sibling Selector) 하나하나 세부적으로 설명하겠다. 자손 선택자(Descendant Selector) 자손 선택자는 선택한 요소의 해당하는 하위 요소들에 모두 적용하는 선택자이다. 공백으로 나타낸다. 저녁메뉴 후보 짜장면 라면 김치볶음밥 규동 결론 면종류는 많이 먹었으니 김치볶음밥과 규동 중에서 오늘은 간장 베이스가 땡..

CSS에서는 HTML 요소를 지정하여 스타일을 설정한다. CSS에서 요소를 선택하는 방법에는 크게 세 가지가 있다. 태그 이름을 사용하여 지정 id 선택자를 사용하여 지정(#name) class 를 사용하여 지정 (.name) 태그 이름을 사용하여 지정하는 방법 저녁메뉴 후보 짜장면 라면 김치볶음밥 규동 위와 같은 HTML 코드에서, style 요소는 HTML 문서를 꾸며주는 CSS 이다. li{ color : blue; } 위 부분은 이 HTML 문서에서 li 요소 전체에 대하여 색상을 blue로 설정한다는 뜻이다. 결과 이처럼 CSS에서는 HTML 태그 이름을 통하여 속성을 지정할 수 있다. 하지만 태그 이름을 사용하여 속성을 지정한다면 원치 않는 부분까지 속성이 지정된다는 단점이 있다. 예를 들어,..

글의 양이 많을 경우에 ... 을 사용하여 생략하여 나타내는 경우가 있다. 예를 들면 코끼리는 코가 손이다. ↓ 코끼리는 ... 위와 같은 방식으로 말이다. 이런 표현방식을 HTML/CSS에서도 할 수 있다. text-overflow text-overflow는 white-space를 이용해 줄바꿈을 하지 않는 경우에 넘치는 텍스트를 어떻게 처리할 지 설정한다. 속성값에는 clip과 ellipsis가 있다. clip clip 속성값은 넘치는 텍스트를 잘라버린다. ellipsis ellipsis 속성값은 ... 과 같은 말 줄임표로 잘린 텍스트를 대체한다. index.html 현지시각으로 8일 워싱턴포스트, 뉴욕타임스 등 주요 외신에 따르면 유럽연합 집행위원회(EC)와 유럽의회, EU 27개 회원국 대표는 ..

아두이노 개발에 필요한 통합 개발환경인 아두이노 IDE를 설치하는 방법에 대하여 설명하겠습니다. 우선, 주로 사용하는 포털 사이트에 "아두이노"를 검색합니다. 저는 구글을 사용하였습니다. 제일 상단에 나온 Arduino 공식 사이트로 들어갑니다. 위와 같은 화면이 나올 것입니다. (23.12.07 기준) 아두이노 공식 사이트의 상단 탭에서 SOFTWARE을 클릭합니다. 소프트웨어 탭에 들어간다면, 바로 Downloads 창이 보일 것입니다. DOWNLOAD OPTIONS에서 본인 컴퓨터에 맞는 옵션을 선택해 다운로드합니다. 필자는 Apple Silicon MacOS를 사용 중이므로, 제일 아래의 다운로드 옵션을 선택하겠습니다. 그러고 나면 위와 같이 돈을 지불하는 거 같은 화면이 나오는데, 이것은 소프트..

display는 요소를 표현하는 방식에 대한 속성이다. block 기본적으로 가로 영역을 모두 채운다. width, height 속성을 지정하여 영역 크기를 조절할 수 있다. 기본적으로 display 속성값이 block에 해당되는 태그에는 , , , 태그가 있다. Hi안녕!Bye 블록 방식에서는 가로 영역을 모두 채우기 때문에 아래와 같은 형식으로 나타난다. 결과 inline 가로 영역을 가득 채우지 않기 때문에 줄바꿈이 되지 않는다. width와 height를 지정할 수 없다. inline 요소를 두 개 사용하면 줄바꿈되지 않고 바로 오른쪽에 표시된다. Hi안녕!Bye 결과를 보면 줄바꿈이 일어나지 않고 수평 방향으로 쭉 이어진 것을 확인할 수 있다. 결과 inline-block inline 방식이 w..