본문 바로가기

전체 글

 (25)
[CSS] 박스 모델(+border 속성, display 속성) 태그의 성격과 일반적인 쓰임에 따라 자신만의 부피를 갖는 것과 화면 전체가 태그의 공간으로 해당되는 것이 있다. 전자는 inline element 후자는 block level element 라고 한다. (element는 tag와 같은 말이다) 전자는 특정 문자열에 쓰는 태그 (a, u 등등) 후자는 더 넓은 범위에 쓰는 태그 (h1 , body 등등) 이렇게만 말만 보면 무슨 소리인지 모르겠지만, 눈으로 직접 보면 이해가 된다. border 속성을 통해 이해해보도록 하자. border 속성은 태그의 테두리border의 설정을 정한다. 이 때 세부적인 속성은 다음과 같다 border - width : 테두리의 폭 border - color : 테두리의 색 border - style : 테두리의 스타일 (실..
[CSS] 그래서 CSS 선택자가 뭐라고? a, h1 등등의 'tag'라는 선택자 말고도 다른 종류의 선택자들이 있다. 1. class 특정 페이지들을 방문했을 때 링크 색깔을 빨간색으로 바뀌게 하려고 한다. 이렇게, 해당 페이지에만 특정 효과를 넣으려고 하는 것이지만 다른 태그에 중복되는 속성을 부여하게 될 경우, 결국 귀찮고, 불편하다. class 를 지정하면 이러한 귀찮음을 없앨 수 있다. 이렇게 style 속성 대신 class 속성을 지정했다. '방문'이니까 value를 visit로 정했다. 그 다음 style 태그 안에 class 선택자를 쓴다. .속성값 으로 적용할 수 있다. 결과 만약, 다른 페이지에서는 빨간색으로 보이지만, 2번 페이지로 이동했을 때는 2번 페이지의 링크를 초록색으로 바꾸고 싶어진다면, 이렇게 추가적으로 값을 지정할..
[CSS] Style 속성+선택자Selector와 효과Declaration 웹브라우저에 CSS를 적용하는 방법은 어디서부터 어디까지가 CSS인가-라는 정보를 전달해주는 a : 효과를 누구에게 줄 것인가 -> 선택자(selector) color:red;text-decoration:none; : 선택자에게 지정될 효과 -> 선언, 효과(decelaration) color, text-decoration -> 속성(property) black, none -> 값(value) style 속성 HTML 태그 안에 적었던 것을 기억하자. HTML의 속성이다. 그리고 그 값으로 반드시 CSS의 효과가 반드시 들어오도록 약속되어 있는 것이다. 이렇게 HTML 태그에 직접 사용할 경우에는 그 스타일 태그가 위치한 태그에게 바로 효과를 줄 것이기 때문에 선택자를 사용할 필요가 없다. style 태..
[CSS] 왜 CSS를 써야 할까?(2)-Style 웹브라우저는 기본적으로 코드를 HTML이라고 생각한다. 하지만 CSS코드는 HTML코드와는 다르다. 그렇다면 우리는 여기서부터~여기까지는 CSS 언어로 처리해야한다고 HTML의 언어로 웹브라우저에게 설명을 해야 한다. 본문의 내용이 아니라 본문을 설명하는 태그는 다. 이전에 걸었던 폰트 태그는 전부 지우고, 안에 이란 태그를 걸었다. 내가 건들고 싶은 부분은 웹페이지의 링크 부분이었다. 그렇다면 간단히 이렇게 스타일 태그 안에 태그명 + {}를 걸고 그 안에 내가 원하는 효과를 적는다. 속성도 값도 적을 필요 없이 이렇게 간단히만 적으면 변한 게 전혀 없다. 눈에 보이는 변화가 없다는게 왜 중요하냐면, 힘들게 커서를 눌러가며 일일히 font태그를 걸 이유가 사라졌기 때문이다. 만약 내가 검은색이 더 깔끔..
[CSS] 왜 CSS를 써야 할까?(1) CSS(Cascading Style Sheet)는 이름에서도 볼 수 있듯이, 스타일-디자인을 지정하는 언어다. HTML 만으로는 한계를 느낀 사람들이 만들어낸 언어라고 한다. 하지만 그저 HTML에 문법을 더 추가하든 수정하든 해서 보완할 수도 있지 않았을까? 왜 구태여 또다른 언어를 만들었을까? CSS가 생기기 전, HTML에서도 디자인을 위한 '태그'가 있었다. 하지만 지금은 쓰지 않는, 이것의 이름은 태그다. 자, 내가 만든 웹페이지가 있다. 나는 여기서 저 위에 있는 웹페이지 링크들의 색깔을 좀 더 내 웹사이트에 어울리게 바꿔보고 싶다. 여기서 잠깐 간단하고 유용한 키를 소개한다. VS CODE에서 경우, 다중커서를 적용하고 싶을때 일렬 다중커서- Ctrl + Alt + Up/Down 무작위 다중..
[HTML]iframe 태그로 동영상을 삽입해보자 이렇게 링크가 아니라 외부 사이트의 동영상 자체를 삽입하려면 frame(inline frame)태그를 걸어야 한다. BLANK 직접 iframe 태그를 입력하는 방법도 있지만, 유튜브처럼 동영상의 주소를 담은 iframe 태그를 퍼갈 수 있게 한 경우 그대로 복사해서 붙여넣기 하면 끝난다. 다만, iframe 기능이 되지 않는 브라우저가 있다. 그래서 여닫는 태그 사이(BLANK)에 문구를 적는다면 동영상 대신 그 문구가 뜬다. ------------ 링크보다는 동영상을 직접 삽입한 게 더 좋아보일 수도 있겠지만. 개인적인 취향으로는 를 써서 링크를 거는 게 시각적으로는 더 나아보였다. 어느 쪽이든 자유롭게 활용할 수 있을 것 같다.
깃허브Git Hub에 웹호스팅 하기 https://onetakevibe.github.io/e_ann/ 쨘. 내 웹페이지를 다른 사람들도 접근할 수 있게 호스팅했다. https://opentutorials.org/course/3084/18891 호스팅은 이 페이지를 참고했다. 물론 계속 배워가면서 손보겠지만 일단은 기분이 좋았다. 한동안 계속 내가 만든 웹페이지들을 링크들을 딸각거리면서 봤던 것 같다. ------------------ 웹호스팅을 하면서 html에 대해 가장 고생하면서 배운 것 같다. 배운 대로 했는데 웬 걸 README.md로 연결이 되어서 웹페이지 연결이 안 되더란다. 당황해서 이거저거 바꿔가며 물어가며 찾아가며 한 끝에 겨우내 제대로 호스팅을 할 수 있었다. 시작 페이지 파일명은 index.html이어야 한다. 그렇지 ..
[HTML]닻anchor을 던져라, 링크 태그 <a> 적용 정감가는 가사 '이웃집 빼빼머리 빨간머리 앤/예쁘지는 않지만 사랑스러워' 이 노래의 유튜브 영상을 링크로 달아보기로 했다. 링크를 적용하는 태그인 는 anchor, 닻이라는 뜻을 가지고 있다. Hypertext Markup Language (HTML)에서의 hypertext가 바로 이 태그를 의미한다. href(hypertext reference) 옆에 달고 싶은 링크의 주소를 입력한다. target 웹페이지를 어떻게 열지를 결정한다. 예를 들면 _self 기본값이며, 클릭한 창에서 그대로 열린다. _blank 새로운 창에서 열린다. _parent 상위 레벨(부모) 창에서 열린다. _top 제일 상위 창에서 열린다 title 해당 링크에 마우스를 갖다 대면 나오는 링크의 설명이다. 만약 노래를 들어보고 ..
[HTML]HTML 문서의 기본구조 어느새 정보들이 하나 둘 쌓였다. 이 정보들을 정리정돈하기 위한 구조에 대해서 배웠다. "문서 형식 선언"(Document Type Declaration)의 준말. 즉, 문서가 어떤 형식을 따르는지를 표현하는 것이다. 이 웹페이지는 html로 만들어졌다. 그것을 표현하기 위해, 나는 문서의 시작에 이라고 썼다. html에 있어 모든 태그의 부모 태그가 된다. head와 body를 감싸는 태그. 본문의 내용이 아니라 본문을 설명하는 태그. ex)title, meta 말그대로 웹페이지의 제목이다. 반드시 head 태그의 자식 태그여야 한다. meta는 페이지에 대한 정보를 알려준다. charset은 character set(문자 집합)의 준말이다. uft-8에서 utf는 Unicode Transformati..
[HTML]부모-자식 태그 html에서 부모-자식간의 관계가 만들어질 때, 이는 상대적인 관계다. 부모는 포함하는 태그, 자식은 포함되는 태그다. 따라서 어떤 태그가 자식 태그임과 동시에 그 안에 있는 다른 태그들에 대해 부모일 수도 있다. ol/ul-li를 적용해서 실습해봤다. li는 list의 약자다. 즉 목록을 만들기위해 써야할 태그다. 이렇게 빨간머리 앤의 인물 목록과 지명 목록을 만들어봤다. 목록...이 만들어진 건 좋은데, 인물 목록과 지명 목록의 구분이 필요하다. 이 때, li의 부모태그로 ul을 쓸 수 있다. 그 결과 이렇게 목록 간 구분이 생겼다. ul과 li의 경우는 이렇게 서로가 반드시 필요한 태그다. 그런데, 여기서 상당히 '극단적'인 질문이 던져졌다. 만약 목록이 1억개까지 필요할 일이 있을까? 그렇다면 목..

티스토리툴바