Gentleman'study 젠틀맨

HTML 링크(Link) 오늘날 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재합니다. 이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 태그로 표현합니다 문법 HTML 링크 태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시합니다.태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있습니다. 예제 이 링크를 클릭해 보세요! 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다. targer 속성 target 속성값설명 _blank 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. _self 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정) _..

변수란? 변수(Variables)는 변하는 데이터(값)를 저장할 수 있는 메모리 공간입니다. 데이터를 담을 수 있는 그릇이라 할 수 있죠. 변수에는 데이터가 오직 한개만 저장됩니다. 그러다 보니 새로운데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워지게 됩니다. 변수에 저장할 수 있는 데이터의 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean) 그리고 빈(Null) 데이터가 있습니다. 변수 선언 방법 변수를 선언할 때는 다음 기본형과 같이 var 키워드를 변수명 앞에 붙입니다. 변수명에는 한글을 사용할 수 없으며, 영문과 숫자 그리고 일부 특수 문자(_,$)만 포함할 수 있습니다. var 변수명 = 값; let 변수명 = 값; 변수명 자바스크립트에는 의미를 가진 단어..

float 속성 float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다. clear 속성 clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 줍니다. 컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다. 따라서, float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 합니다. overflow 속성 float 속성이 적용된 HTML 요소가..

연산자 연산의 방식을 결정하는 기호를 '연산자'라고 부르고 연산되는 대상을 '피연산자'라고 합니다. 우리에게 가장 익숙한 +, -, *, / 이 가장 대표적인 예라고 볼 수 있습니다. 산술연산자 기본적인 산술 연산자는 덧셈(+), 뺄셈 (-), 곱셈 (*), 나눗셈 (/)이 있습니다. 이밖에도 나머지(%), 거듭제곱(**) 연산 정도가 있는데, 일반적인 산술연산자는 피연산자 2개 사이에서 이항 연산자로도 활용되고, 특별히 ++(증가), --(감소) 연산자는 피연산자 앞이나 뒤에 붙으면서 단항 연산자로도 활용됩니다. 종류 기본형 설명 + A+B 더하기 - A-B 빼기 * A*B 곱하기 / A/B 나누기 % A%B 나머지 다음 예제를 통해 더하기, 빼기, 곱하기, 나누기, 나머지 연산자를 어떻게 사용하는지 ..

웹에서 이미지를 표현하는 방법은 3가지로 나눌 수 있습니다. HTML 태그를 통해서 : img 태그 (의미가 있는 이미지) CSS 속성을 통해 : background 속성 (의미가 없는 이미지) 이미지 스프라이트 : background와 ir 효과를 통해서 이미지를 표현 img 태그를 통해 img는 HTML 문서에 이미지를 삽입하는 태그입니다. 주요 속성은 src, alt, width, height, loading입니다. src alt width height loading 예제 width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나옵니다. 만약 지정한 경로에 이미지가 없다면 alt 속성에 있는 값이 출력됩니다. width 속성으로 가로 크기만 정하면 세로 크기는 원본의 가로 세로 비율..

IR효과 IR (Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말합니다. 웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 합니다. 단순히 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필수적입니다. pm(Phark Method) 의미있는 이미지의 대체 텍스트를 제공하는 경우 사용합니다. .ir_pm { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } wa 의미있는 이미지의 대체 텍스트로 이미지가 없어도 텍스트를 보여주고자 할 때 사용합니다. .ir_wa { display: block; overfl..