'coding' 태그의 글 목록 (12 Page)

[개발자 도구] 설정값 보기

안녕하세요. 플입니다. 개발자 도구에서 설정값을 편하게 확인해볼게요. 1. 개발자 도구 열기 개발자 도구란 이렇게 생긴 창을 말해요. F12를 누르거나 오른쪽 클릭 > 검사를 누르면 열 수 있어요. 2. 설정 확인할 요소 클릭 특정 요소의 설정을 확인할 거니까 왼쪽 상단에 있는 화살표 모양 아이콘을 클릭해주세요. 그리고 원하는 부분에 마우스를 올리면 이렇게 블럭처리가 됩니다. 원하는 부분이 맞다면 클릭해주세요. 클릭하면 개발자 도구에서 어떤 부분인지 표시가 됩니다. 간단하죠? 3. 설정값 확인 설정값을 편하게 확인하려면 옆쪽으로 가서 computed라는 메뉴를 선택해주세요. 이렇게 설정된 css값을 정리된 형태로 확인할 수 있어요. 만약 내가 설정하지 않은 값이 나와있어요!!! 하시는 분들은 기본 값이 ..

coding/개발 팁 · 2020. 3. 2. 07:30

[new pen] 온라인 코딩

안녕하세요. 플입니다. 온라인에서 코딩할 수 있는 사이트를 알려드릴게요. 1. new pen 바로 new pen 사이트입니다. 구글에 new pen이라고 검색하면 바로 사이트에 접속할 수 있어요. https://codepen.io/NikitaDX/pen/RKLXgG New Pen ... codepen.io 들어가기 편하게 링크를 남겨둘게요. 2. 시작하기 처음 들어오면 화면이 3단으로 분리되어 html css js 세 가지를 코딩할 수 있어요. 지금은 기본으로 쓰여있는 코드예요. 모두 깔끔하게 지우고 사용하면 됩니다. 온라인으로 코딩해도 어렵지 않죠? 3. 코딩하기 코딩은 그냥 원하는 코딩을 하면 된답니다. 예시로 조금만 적어봤어요. 저장을 안 해도 알아서 반영해줍니다. 똑똑한 친구야. 아래 미리 보기 ..

coding/editor · 2020. 2. 24. 07:30

[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

coding 89