IT 세상 해석하기

[CSS] 레이아웃의 단위 By i!kohong(아이코홍) em(em-height) → em과 유사하게 ex(x-height)가 있으며, 이 두 단위는 상속받는 엘리먼트에 대해 상대 크기로 계산됨 %(percentage) → em과 유사하게 지정되거나 상속받는 엘리먼트의 상대적인 백분율 크기를 의미한다. pt(point) → 1pt는 0.72inch와 동일한 절대크기이다. px(pixel) → 화면 해상도를 측정하는 dot 단위와 동일하다. em, px, % 장단점 단위 장점 단점 em ■ 아주 세밀한 2차원의 레이아웃 그리드를 만드는데 적합 ■ 문서 컨테이너에 대해 사용될 경우, body 부분의 사이즈가 확대/축소됨에 따라 레이아웃의 크기도 확대/축소되게 만들수 있음 ■ 화면에 보여질 엘리먼트의 크기를..

인라인 스타일 시트 [CSS] CSS의미와 작성하는 방법 By i!kohong(아이코홍) CSS = Cascading Style Sheet 자주 사용하는 스타일을 미리 정의해 두고 특정 이름으로 스타일을 호출하여 사용하는 방식의 코드 장점 코드의 관리와 수정이 쉬워진다. 웹 페이지를 로딩하는 속도가 빨라진다. 웹 페이지를 작성하는 시간이 줄어든다. 스타일 시트의 방식 인라인 스타일 시트 내부 스타일 시트 외부 스타일 시트 인라인 스타일 시트 태그의 속성 값으로 스타일 지정 인라인 스타일 시트 → 인라인 스타일 시트의 경우 외부 스타일 시트보다 우선적으로 적용됨 내부 스타일 시트 → 외부 스타일 시트와 함께 태그 스타일, 클래스 스타일, 네임드(Named)스타일을 만들 수 있다. 태그 스타일 특정 태그에 ..

설명이 필요없이 다음 사진을 보시면 아! 하실껍니다. 네이버 인터넷 개발자 모드에서 네이버 홈페이지에 CSS를 없애보았습니다. 어디서 봤는데 하시는분이라면, 가끔 오류가 났을때 보여지는 화면입니다. CSS가 작동을 안했다는 뜻이죠. 이 사진 하나만으로 CSS가 우리에게 보여주는 화려한 홈페이지를 작성해주는걸 느낄수가 있습니다. 뼈대인 HTML에 사용자들이 눈으로 잘 볼 수 있게 해주는 CSS!! 다음 글부턴 CSS에 대한 작성법과 기술을 적어보도록 하겠습니다.

[JS] 16진수 색상 찾아보자! By i!kohong(아이코홍) 선택한 색상 16진수 확인

[Java] 10진수 16진수 변환방법(Feat. RGB) By i!kohong(아이코홍) 10진수는 우리가 흔히 보는 숫자입니다. 유치원때부터 배워왔다고 보면되죠. 그런데, 컴퓨터코드를 사용하다보면, 16진수를 사용해야되는경우가 있습니다. 16진수도 간단합니다. 가장 쉽게 표현하자면 '1~10'의 대신 '1~F'까지 있다고 생각을 하시면 됩니다. RGB 10진수를 16진수로 변환하는 방법을 예시로 한번 알아보도록 하겠습니다. 16진수 표기 방법 A = 10, B = 11, C = 12, D = 13, E = 14, F = 15 10미만은 일반적으로 10진수 표기하면 되며, 10이상의 경우 표기되는 방법은 A~F입니다. 16진수이기 때문에 16미만까지만 표현됩니다. 10진수 16진수로 계산방법 = 10진..

[JAVA] CMD(명령 프롬프트)로 컴파일(javac) 및 Java실행하기 By i!kohong(아이코홍) 코드를 짜게 될 경우 보통은 에디터를 많이 쓰게 됩니다. 이클립스, visual studio code, sublime text3 등 과 같이 코드를 짜는데 도움을 주는 에디터를 많이 사용합니다. 덕분에 코드를 짜는데 조금이나마 시간이 단축이 되죠. 그렇지만, 한번은 CMD를 통해 코드를 컴파일하고 실행하는것도 괜찮은 방법인듯 합니다. 공부하기에는, 에디터의 도움없이 코드를 짜면서 하는게 개인적으로 가장 효과가 좋은거 같습니다. 물론, 나중에는 에디터의 도움을 받으면서 코드를 짜는게 수월하죠. CMD를 활용한 컴파일(javac)와 java 실행하는법에 대해 한번 알아보겠습니다. 텍스트 문서 생성 우..

[HTML] 다른 웹 페이지 포함시키는 방법. 태그 By i!kohong(아이코홍) 태그 설명 다른 웹 페이지를 자신의 웹 페이지에 포함시키는 태그 Attribute(속성) name 이름을 지정. target 속성을 사용할 때 필요 src 파일(파일 경로와 파일 이름)을 지정 scrolling 프레임에 스크롤 막대가 표시되지 않게 지정(yes, no, auto)한다. 기본값은 auto이다. align 정렬 방식(left, right, center)을 지정. width 너비(픽셀)를 지정. height 높이(픽셀)를 지정. frameborder 프레임을 구분하는 테두라를 표시할지 여부(0이나 숫자)를 지정한다. bordercolor 테두리 색(색상이나 색상 코드)을 지정. 예시 See the Pen Tag..

[HTML] 홈페이지에 리스트를 만들자! 리스트 관련 태그 ,,,,, 태그 By i!kohong(아이코홍) 태그 태그 설명 Ordered List의 약자 순번이 있는 목록으로 정렬할 떄 사용합니다. 목록의 항목을 표시하는 태그와 함께 사용합니다. Attribute(속성) type 각각의 목록 앞에 붙는 표식(A,a,I,i,1)을 지정한다. 1 : 아라비아 숫자 a : 알파벳 소문자 A : 알파벳 대문자 i : 로마숫자 소문자 I : 로마숫자 대문자 start 시작 번호(숫자)를 지정한다. - 태그 태그 설명 Unordered List의 약자 순번이 없는 목록으로 정렬할 때 사용합니다. 목록의 항목을 표시하는 태그와 함께 사용합니다. Attribute(속성) type 각각의 목록 앞에 붙는 표식(disc,..

[HTML] 웹 문서의 정보를 포함시켜주는 태그 By i!kohong(아이코홍) 태그 설명 HTML의 head영역에 삽입이 됩니다. 정보, 인코딩, 트랜지션 효과, 다른페이지 자동 이동과 같은 형태로 사용됩니다. 브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함하고 있습니다. Attribute(속성) name Author : Content에 제작자 정보 입력을 합니다. Keyword : Content에 검색 태그를 입력 합니다. Description : Content에 글 내용을 입력 합니다. Subject : Content에 홈페이지 주제를 입력 합니다. Title : Content에 홈페이지 이름을 입력 합니다. Publisher : Content에 만든이의 이름을 입력 합니다. Oth..

[HTML] 홈페이지에 이미지를 올리자! 태그 By i!kohong(아이코홍) 태그 설명 그림을 삽입하는 기본 태그입니다. 태그에서 사용할수 있는 파일명으로 GIF,JPG/JPEG,PNG 3가지가 있습니다. GIF (Graphic Interchange Format) 움직이는 이미지 파일 JPG/JPEG (Joint Photographic Expert Group) 뛰어난 압축률이 특징 PNG (Portable Network Graphics) GIF와 JPG/JPEG의 장점을 특징으로 가진 차세대 그래픽 파일 포맷 형태 Attribute(속성) src 그림 파일의 경로를 지정합니다. height 그림의 세로 높이를 지정합니다. 단위는 픽셀과 퍼센트(%)입니다. width 그림의 가로 높이를 지정합니다. 단위..