Ben의 프로그램

인라인 태그는 자신의 콘텐츠만큼 크기를 사용한다 블록 태그는 화면 전체 가로 크기를 사용한다. 인라인 요소는 가로 전체를 차지하지 않기 때문에 인라인 요소들 끼리는 같은 동일선상에서 놓이게 된다. 인라인 요소의 가장 큰 특징이라고 볼 수 있는 것은 바로 '크기를 지정할 수 없다'라는 점이다. 인라인 요소에는 좌우에만 여백(margin)을 지정할 수 있는 특성이 있다. 블록 요소는 생성이 되면 너비는 최대로 늘어나고 높이는 포함한 콘텐츠 크기만큼 늘어난다. 블록 요소의 가장 큰 특징은 인라인 요소와 다르게 너비 / 높이를 원하는 크기로 지정할 수 있다는 점이다. 또한 블록 요소는 여백도 상하좌우 상관없이 자유롭게 지정해줄 수 있다.

태그에는 다양한 추가정보를 입력할 수 있는 속성들과 속성에 해당하는 속성 값들을 입력해줄 수 있다. 대표적인 예시로 img 태그를 볼 수 있겠다. HTML 에서 주석은 로 표현되면 단축키는 Ctrl / 이다.

태그 중에는 닫는 태그가 없는 빈태그들이 있다. a, meta, img 등이 있다. 이런 태그들을 작성할 때는 로 작성하는 방법도 있는데, 사실은 HTML 5 이전에 사용되던 방식이었다. 개발자가 임의로 빈태그더라도 닫는 표식을 해주어야 했다. 그래서 빈태그더라도 로 작성하면 이전 버전과의 호환성을 높일 수 있는 방법이 될 수 있다.

태그들의 부모 관계는 여러 곳에서 사용이 된다. 예를 들어, 리스트를 만들 때 사용하는 ol 와 li 태그들은 무조건 부모 자식 관계를 가져야 하는 태그들이다. 또 다른 예시로는, CSS 를 적용할 때 선택자로서 자식 부모 관계가 이용되기도 한다는 점이다.

태그 중에는 닫는 태그가 없는 태그들도 있다.

select 아이콘을 클릭하면 요소들을 선택하여 세부 내용들을 확인할 수 있다. 이처럼 웹 브라우저의 개발자도구는 웹 개발을 하는데 있어서 매우 중요한 기능이다. Java 의 디버거와 완전히 같은 것은 아니지만, 현재 웹의 HTML과 CSS 속성, JS 동작을 확인하기 위한 다양한 기능들을 제공한다. 내 개인적인 경험으로는 CSS 적용을 할때 제일 많이 보았던 것 같다.

위와 같이 보이게 된다. 해당 링크를 클릭하면 Naver 로 이동하게 된다. 새탭에서 열리거나 현재 탭에서 열리게 하는 속성은 target 이라는 속성이다. 이렇게 상세 페이지와 홈페이지를 a 태그를 추가해주면서 서로 왔다갔다 할 수 있게 만들어준다.

폴더를 만들고 이미지를 드래그하여 폴더 아래에 넣어주었다. img 태그는 src 와 alt 를 속성으로 갖는데, 닫는 태그가 없는 태그인 것을 볼 수 있다. 상위 폴더로 올라가는 표현은 ../ 이다. 절대경로는 / 로 시작하는데, 변함이 없기 때문이다. 여기서 말하는 / 는 루트로 최상위 경로를 의미한다. 우리 프로젝트에서는 my-project 가 최상위 폴더가 된다. 이게 무슨 말이냐면 원래 c 드라이브가 최상위 폴더이거나 하는데, 이와 같이 VSC 에서 작업을 할때 최상위 폴더는 내가 가져온 폴더가 되는 것이다. 그래서 위의 그림과 같은 경우에는 VS-WORKSPACE 가 최상위 폴더가 된다. 아무튼 핵심은, 최상위 루트를 표시하는 / 를 생략할 수는 없다는 것이다. 그런데, 알아둬야 하는 점이 하나..

title 태그는 브라우저 상단 탭 영역에 표시가 된다. css 를 html 파일 내부에서 작성하는 것은 하지 않는다. (함수의 변수를 쓰지 않는 것과 마찬가지의 비효율성이 발생하기 때문이다) script 태그는 JS 를 연결할 때 사용한다. 그런데, CSS 처럼 script 태그 안에 JS 를 직접 적어줄 수도 있다. meta 태그는 문서의 제작자, 설명, 문자인코딩 같은 정보를 나타낸다. meta 태그는 눈에 보이지 않는 태그로 문서에 대한 다양한 정보들을 담을 수 있는 태그로, 부가적인 정보들을 담고 있다.

html 태그의 내부는 웹 문서의 시작과 끝으로 전체이다. head 태그에는 meta 정보를 갖게 된다. css 와 html 을 연결해주기 위해서 head 영역에 link 태그를 만들어서 연결해준다. ./ 를 href 에 넣어주면 현재 폴더 안의 있는 파일들을 보여준다. main.css 를 선택해서 적용해주면 된다. 여기서 사용한 ./ 는 상대경로를 의미한다. css 파일을 연결해줄 때는 head 태그 안에서 link 태그를 활용한다. 우리가 작성한 JS를 보면 객체를 호출하고 객체 안의 함수를 호출하여 사용하고 있다. JS 같은 경우에는 별도로 객체를 선언하지 않아도 기본적으로 제공해주는 객체들이 있고 그들을 사용해서 함수를 ㅏ사용한다. JS 와 html 을 연결하는 것은 마찬가지로 head 영역에 s..