생활코딩 - <Web> 12 : parent 와 child 부모 자식 관계의 태그(목차 태그_부모 태그 ul 과 자식 태그 li), 순서가 있는 목록 태그 ol, 순서가 없는 목록 태그 ul, 표 태그인 table, tr, td
생활코딩 <Web> 공부
생활코딩 web 12강 학습정리 내용 입니다.
12) parent 와 child (부모 자식 관계의 태그와 목록)
태그에는 서로 포함 관계로 연관되어 있는 부모 자식간의 태그가 있다.
< parent > < /parent > 태그와
< child > < /child > 태그가 있을때
< parent >
< child > < / child >
< / parent >
위와 같이 자식태그를 포함하고 있는 태그가 부모 태그,
포함되어 있는 태그를 자식 태그라고 부른다.
HTML에 있는 여러 태그들은 서로 부모 자식 관계가 바뀐다.
어떤 태그들은, 자식태그가 있는 곳에 항상 부모태그가 있고 부모가 있는 곳에 항상 특정한 자식 태그가 있는 사이 좋은 태그들이 몇 있다.
이번 강의에서는 이런 태그들에 대해서 살펴볼 것이다.
그리고 맨 처음 기획서를 구상할 때
- html
- css
- javascript
이 3가지 목차 만들기를 완성해 볼 것이고
배우는 과정에서 부모 자식 관계에 해당되는 태그를 살펴보도록 하자.
편집기에 순서대로 html , css , javascript 를 입력하고 저장,
웹 페이지에 새로고침하면 일렬로 글이 나타날 것이다.
여기서 목차답게 하기 위해 줄바꿈 태그를 사용해보자.
각 글자의 뒤에 < br > (줄바꿈) 태그를 입력해주었다.
그리고 목차로 쓰일 순서에 맞게
1,2,3 의 숫자를 입력해주고 새로고침하니
페이지에 그럴 듯 하게 목차같이 보여진다.
그러나 HTML 을 만든 공학자들은,
목차를 쓸 때 사용하라고 어떠한 태그를 고안해냈다.
우리는 이 태그를 사용해야만 이 태그가 의미에 맞게 사용되는 것이라고 할 수 있는 것이고 웹 페이지가 더 가치있게 된다.
<목차> 라는 태그를 사용할 것인데,
목차는 영어로 'list' 이다. list 의 앞에서 2글자는 < li > 이다.
즉, < li > 가 바로 목차 태그이다.
글의 앞뒤로 열리는 태그 < li > 와 닫히는 태그 < / li > 를 써주는데,
이때 1번부터 3번까지 일일이 목차 태그를 입력해주게 되면
나중에 1 ~ 100 번의 목차가 있다고 가정했을 때,
전부 입력해주는게 쉽지 않을 뿐더러 시간이 많이 소요될 수 있을 것이다.
여기서 팁은
열리는 태그를 입력 할 숫자 1번 앞을 클릭한 뒤
Ctrl 을 누르며 숫자2번과 3번 앞을 하나씩 클릭해준다.
그런 다음 누르고 있던 Ctrl 키를 때고 태그를 입력해주면 각 번호 앞에 동시에 태그입력이 가능해진다.
이를 이용하여 < li > 라는 태그를 동시에 입력한 뒤
마찬가지로 글자의 뒤쪽에 닫히는 태그인 < / li > 를 입력해준 뒤 저장하고
웹 페이지를 새로고침 해주면 위와 같이
목록의 형태를 띄며 바뀐 것을 확인 할 수 있다.
여기서 부모태그와 자식태그를 사용해보자면,
예시로 [ egoing ] , [ k8805 ] , [ youbin ]
이라는 닉네임을 가진 참여자들을 적었다고 가정해보자.
이 닉네임들 앞에도 똑같이 < li > 과 < / li > 목록 태그를 표시해주었을때
위의 3개는 수업의 순서를 나타내는 목록이고,
아래 3개는 닉네임을 가진 참여자 라고 했을때,
웹페이지에는 총 6개의 목록으로 나열되어 나타나진다.
여기서 우리는 각각의 목록을 구분해주기 위해
줄바꿈 태그인 < br > 을 입력하여 구분됨을 표시할 수도 있다.
그러나 이런 경우에 사용하라고 고안된 태그는
< li > 이라는 자식 태그의 부모 태그인 < ul > 이라는 태그이다.
위 이미지처럼 < li > 태그의 위에 전체를 감싸주는 식으로
< ul > 태그의 열리는 태그와 닫히는 태그를 입력해준다.
그리고 이렇게 적었을 때 한줄로 정리되어지지 않은 태그들을 볼 수 있는데,
이를 좀 더 정리된 태그 모습을 위해
자식태그로 감싸져 있는 목록내용을 전부 드래그한 뒤, 단축키 Tab 를 누르면 문단이 한칸 앞으로 들여진다.
편집된 내용을 저장 후 웹페이지를 새로고침 하면
위와 같이 목록이 구분되어지고, 여백이 정리되어 표시됨을 알 수 있다.
이때 사용하는 ul 태그는, 순서가 정해지지 않은, 순서가 없는 목록을 적을때 사용하는 태그이다.
그리고,
순서가 1번부터 ~ 1000번 이상의 목록을 나열해야 된다고 했을때는 이 ul 태그를 사용할 수 없다.
그럴때 사용하는 태그는 바로 < ol > 태그이다.
위 그림처럼 < ul > 태그를 지우고
< ol > 태그를 열리는 태그와 닫히는 태그로 입력해주었다.
< ol > 태그는 < ul > 태그와 반대로 숫자를 표시해주며 순서가 있는 목록을 형성해준다.
그렇기 때문에 1번과 2번이라고 적힌 숫자를 지워준 후 저장, 웹페이지를 새로고침해주면
숫자를 쓰지 않았음에도 불구하고
웹 페이지에는 1번부터 2번까지의 숫자가 순서대로 나열되어 나타나게 된다.
< ul > , < ol > 요약
우리가 배운 < ul > 과 < ol > 태그는
공통적으로 뒤에 ' L ' 이 들어간다.
l <- 은 List 의 약자이다.
ol 태그는 ' Ordered List ' 의 약자이고
ul 태그는 ' Unordered List ' 의 약자이다.
ol 은 말 그대로 순서가 있는 목록을 뜻하는 태그
ul 은 순서가 없는 목록을 뜻하는 태그를 뜻한다.
< li > , < / li >
= 목차 태그 , list의 약자 li , 자식 태그
< ul > , < / ul >
= 순서가 없는 목록 태그 , unordered list의 약자 ul , 부모 태그
< ol > , < / ol >
= 순서가 있는 목록 태그, ordered list의 약자 ol , 부모 태그
위 그림은 이전에 통계 분석할 때 보았던 표이다.
표를 보면 이번 시간에 배운 태그들은
사용 빈도수가 매우 높은 쪽에 속해 있음을 알 수 있다.
우리는 이 태그들을 여러 상황에서 좀 더 복잡한 태그들을 자주 접하게 될 것인데
예를 들어 표를 작성한다고 가정시
표는 영어로 < table > 태그로 표시한다.
< li > 와 < ui > 같은 경우 자식과 부모, 2대 관계라면,
< table > 태그의 경우에는
< table > , < tr > , < td >
이렇게 3대가 같이 다니며 사용하게 된다.
그렇기 때문에 복잡한 태그사용이 되겠지만
우리는 나중에 혼자서도 충분히 이러한 표를 작성할 수 있도록 학습하고 사용할 수 있게 될 것이다.
