명이나물 라이브러리
---- 면접 중 --- [면접관] "사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요." [나] "!@#$%^&*" 위 면접 질문은 실제 면접에서 자주 다루는 질문입니다.. 이를 이해하기 위해서는 먼저 Semantic Web과 Semantic Tag에 대한 이해가 있어야 합니다. 실제 면접때를 대비하기 위해 잘 공부해 둡시다ㅎㅎ 자, 그럼 심호흡 크게 한번 하고~ Let's Go~!! (☞ﾟヮﾟ)☞ 시맨틱 웹 (Semantic Web) 시맨틱 웹이란 무엇일까요? Semantic은 사전상 '의미론적인, 의미의' 이라는 뜻을 가지고 있습니다. 그렇다면 ..
Position CSS의 `position` 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있습니다. 예를 들어, html상 코드의 위치는 제일 마지막인데, 페이지에서는 제일 위에 보이게 할 수 있습니다. 아래는 posion의 값으로 오는 것들 입니다. 아래와 같이 4가지가 있으며, 자주 사용하는 것은 relative와 absolute입니다. position: static;-거의 사용하지 않음 position: relative; position: absolute; position: fixed; 1. relative position: relative; 자체로는 특별한 의미가 없으며, 딱히 어느 위치로 이동 하지는 않습니다. 위치를 이동시켜주는 top, right,..
이전 사전 스터디때 공부했던 내용으로, 새롭게 알게된 내용만 파악하고 넘어가자! Margin과 Padding 👉 273px이라는 가로 값은 border와 padding이 합쳐진 가로 길이 👉 margin까지 합쳐진 가로의 길이는 373px 👉 순수내용(파란색영역)의 길이는 273px에서 border(-10)와 padding(-100)을 제외한 163px p.example { width: 273px; height: 90px; margin: 50px; border: 5px solid black; padding: 50px; } Margin (주황영역) p.example { margin: 50px; } margin에 50px값을 주면 테두리 사방으로 여백이 생긴다. 즉, 위 코드를 풀어쓰면 아래와 같다. p.e..
1. Text-align 텍스트 정렬 왼쪽 정렬 : left, 모든 요소의 기본 정렬은 왼쪽 정렬이므로, 아무 text-align을 주지 않은 태그는 왼쪽 정렬이됨. 오른쪽 정렬 : right 가운데 정렬 : center .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } 예외. 은 inline-element이므로, text만큼의 영역을 차지하고 있으므로, 정렬이 되지 않는다! 2. text-indent 띄어쓰기로 들여쓰기 안되는 것도 text-indent 을 이용하면 들여쓰기 가능! ✋ text-indent : 10px 는 스페이스바 두번( )과 동일하다! .js-description { tex..
Wecode 2일차 Session 주제 웹 서비스 역사와 발전 멘토 김순태 멘토님 순태님은 백앤드 개발자이시며, VIM 에디터를 좋아하신다고 하신다 ! 01. Internet & Web [인터넷] 1960년 군사적 목적 당시의 중앙집중적 통신 시스템. 핵 공격에 취약. 핵 공격에도 견딜 수 있는 강한 통신 시스템 필요>> internet web이 출현하며 인터넷이라는 통신 시스템이 대중적으로 사용되기 시작. [웹] 1990년-인터넷 출현 후 30년뒤 팀버너스리가 만듦. web은 최초의 브라우저. world wide web을 통해 인터넷이 대중화됨. 가장큰 혁신으로 유통이 가능하게 됨. 예전에는 소프트웨어를 구입하려면 물리적인 매개체가 필요 이런 유통의 과정이 혁신적으로 줄어들면서 많은 개발자들이 창업을 ..
1. font family 폰트 스타일을 지정하는 속성 #title { font-family: Georgia, "Times New Roman", Times, serif; } Georgia, "Times New Roman", Times, serif 라는 값을 해석해보자면, 브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용 Georgia 폰트가 지원되지 않으면, "Times New Roman"을 적용, 이것도 지원되지 않으면 Times을 적용 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻. [font family에 여러 폰트를 나열하는 이유] 사용자가 어떤 브라우저를 사용할지 모르기 때문에 font-family 값에는 보통 여러가지 폰트를 나열. 가장 뒤에 ..
1. 인라인 스타일 태그 style 속성에 직접 작성 FRONTEND 101 [장점] 빠르고 편함 [단점] 적용해야할 스타일이 많아지면 코드 가독성이 떨어짐. html 태그와 style코드가 혼재되어 있어 유지보수에 좋지 않음. 2. style tag html 파일 내에 css를 작성할 수 있는 방법 [장점] html 파일에 HTML 코드도 작성하고, CSS도 작성하니 편하고 빠른 방법 [단점] 적기능적으로(HTML구조와 디자인) 분리되지 않았기 때문에 유지보수에 적합하지 않음. [ 개발꿀팁 ] HTML을 수정하려면 html 파일을 확인하고, 디자인을 수정하려면 css파일을 확인하는 것는 것이 개발하기 좋음. 3. CSS 파일에 작성 html 파일과 분리하여 별도의 css파일에 따로 작성 html파일에서..
[html의 태그] https://www.w3schools.com/tags/tag_a.asp , , , , : 주로 제목같은 텍스트를 보여줄때 사용하는 태그. 와 같이 짝을 맞추어 태그를 닫아줌. : 주로 텍스트의 내용이 들어간다. 내용이 줄이 바뀌지 않고, 한 줄에 이어서(inline-element) 나오게 됨. : 주로 텍스트의 내용이 들어가며, 주로 문단을 통으로 넣을 때가 많음. 줄바꿈이 (block-element) 일어나게됨.. : href 속성을 사용하여, 내용 클릭 시 화면이 이동. target 속성의 값에 따라 창이 새창으로 띄워짐("_blank" 값을 입력시 새창으로 뜨게 해줌) : 웹사이트에서 섹션을 나눌 때 사용. 비슷한 부분끼리 그룹 디자인에 맞게 레이아웃을 분리 => 각각의 에 c..
내 아이피 주소를 변경하는 방법을 알아보기 전에! DHCP에 대해 먼저 알고가자~!! DHCP(Dynamin Host Configuration Protocol) 네트워크를 기기에 연결하려면 본래는 직접 아이피 주소를 다른 기기와 중복되지 않게 직접 지정해야한다. 하지만, DHCP가 이 역할을 자동으로 설정해줌으로써 우리는 보다 편리해지고 이로부터 자유로워졌다. 먼저, DHCP서비스를 이용하기 위해서는 아래의 것들이 있어야하며, DHCP 서비스가 이루어지는 과정에 대해 살펴보자! 1. DHCP Server 2. DHCP client 3. 기기 식별자(Mac address or physical address) DHCP 서비스가 이루어지는 과정 1. DHCP client -> DHCP server 아이피 주소..