'coding/html + css' 카테고리의 글 목록 (14 Page)

[html] id / class 구분

안녕하세요. 플입니다. id와 class 속성은 어떤 점이 다를까요? 1. id id 속성은 identifier의 약자인데 '식별자'라는 뜻입니다. 식별을 위해서는 동일한 이름이 여러 개가 있으면 안 되겠죠. 그래서 id는 동일 이름이 한 html문서당 한 개만 사용하는 것을 권장합니다. 똑같은 이름을 여러 번 쓴다고 오류가 나는 것은 아니지만 나중에 본인이 짠 코드를 보기 어려워질 수 있습니다. 보통은 header와 footer에 id를 주로 쓰고 경우에 따라서 container에도 id값을 주기도 합니다. 2. class class는 id 이외의 요소에 스타일을 주고 싶을 때 주로 사용합니다. 예를 들어 gnb 같은 부분이 있겠죠. 또 선택자로 잡기 힘든 여러 군데 퍼져있는 요소에 동일한 스타일을 줄..

coding/html + css · 2020. 2. 12. 07:30

[html] 의미 없는 문장 채우기

안녕하세요. 플입니다. 샘플로 한 문단 정도 아무런 말이나 채우고 싶을 때가 있죠. 그럴 때 어떤 방법을 사용할까요? 1. 문단 만들기 먼저 태그를 이용해 문단을 만들어줍니다. 예시를 위해 아무 파일이나 불러와서 작성 중이니 다른 태그는 신경 쓰지 않으셔도 좋습니다. 2. lorem.. lorem을 태그 안쪽에 적어줍니다. lorem은 lorem ipsum을 뜻하는 말로, 말하자면 채우기 텍스트입니다. 출판이나 그래픽 디자인 분야에서 레이아웃에 집중하기 위해 의미 없는 텍스트를 채울 때 사용하는 것을 지칭합니다. 글자를 읽는 것에 집중되는 걸 막는 용도로써 의미를 담고 있지는 않습니다. 코딩에서도 같은 용어를 쓴다니 신기하지 않나요? 3. Tab 아니 이 많은 문장들은 뭐야?라고 생각하셨다면 잠시만 기다..

coding/html + css · 2020. 2. 10. 07:30

[css] z-index

안녕하세요. 플입니다. z-index에 대해 그려봤어요. 2. z-index z-index z-index는 겹치는 요소들 간의 순서를 정리해줄 때 사용해요. 위쪽으로 올리고 싶은 요소에 값을 더 크게 적어주는데 z-index: 30; 위처럼 숫자를 값으로 입력하고, 숫자가 높을수록 위쪽으로 올라온답니다. 포토샵의 레이어와 동일하다고 여기면 조금 더 쉽게 이해할 수 있죠. 포토샵을 몰라도 괜찮아요. 이렇게 생각해보면 어떨까요? 1층보다는 2층이 위에 있죠. 숫자는 그런 의미랍니다. 일반적으로 요소들이 겹치는 일은 거의 없지만 position을 사용하면 이야기가 달라져버립니다. 한 요소에만 position을 사용한다면 상관없겠지만 사람 일이라는 게 그렇게 마음대로 되지는 않다는 걸 저희는 이미 알고 있죠. ..

coding/html + css · 2020. 1. 2. 07:30

[css] 레이어 설정

안녕하세요. 플입니다. css에서 위치 순서를 정해보겠습니다. 1. z-index ul{ z-index:10; } 이미지처럼 두 개 이상의 요소가 겹쳤을 때 순서를 정해주는 코드가 z-index입니다. 포토샵을 사용하신다면 포토샵의 레이어와 같은 원리라고 이해하시면 됩니다. z-index의 숫자가 클수록 위쪽으로 올라옵니다. 2. 범위 ul{ z-index:-10; } z-index의 범위는 정수로 -(마이너스)까지 포함합니다. 수를 -10으로 줬을 때 뒤쪽으로 보내져 보이지 않게 된 것을 알 수 있습니다. 자리를 표시하는 부분이 살짝 보이지만 요소는 보이지 않죠. 2020년 새해 복 많이 받으세요~! 그럼 이만. 총총.

coding/html + css · 2020. 1. 1. 07:30

[html] 뷰포트 설정하기

안녕하세요. 플입니다. 오늘은 뷰포트를 설정해보겠습니다. 1. 뷰포트(viewport) 뷰포트는 모바일 화면을 위해 꼭 필요한 태그입니다. 뷰포트를 설정 안 했을 때 화면입니다. 뷰포트를 설정했을 때 화면입니다. 어떤 차이가 있는지 확실히 느껴지시죠? 2. 뷰포트 설정 위에도 같은 코드를 적었는데요 이 메타태그를 태그 안에 넣어주시면 설정 완료입니다. 저렇게 메타태그를 넣어줍니다. 그럼 이만. 총총.

coding/html + css · 2019. 12. 23. 07:30

coding/html + css 101