rohjs/bugless-101

👾 김버그의 버그 없는 HTML & CSS 강의자료

bugless-101's Issues

Github Dropdown Menu ::befor 관련 질문이요!ㅠㅠ

Question

👉 드롭다운 메뉴가 펴진 상태에서 마우스를 올리면 저렇게 ::befor 밑에 밑줄이 생기는데 안생기게 할 수 있는 방법이 있을까요?
너무 거슬려요 ㅠㅠㅠㅠㅠ

Related Contents

👉 Github Dropdown Menu
https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4/lesson/976555/github-dropdown-menu

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

html 기초 이외 나머지 강의들은 언제 오픈되나요~? 🥺

Question

👉 강의 잘보고 있습니다!
기초는 다 학습하였고,
나머지 강의 오픈을 기다리고 있습니다 ㅠㅠ
만드시느라 힘드실텐데 너무 기다려집니다!!! 귀에 쏙쏙 잘 들어오게 강의 해주시고,
넘모 이해가 잘가서 얼른 css랑 js도 빨리 하고싶어집니다!!!
감사합니다!! 화이팅팅!! ☺️

Related Contents

👉 html 기초 이후의 강의들

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

강의시간 html, css 총 얼마나 될까요??

Question

👉 강의시간 어느정도 인지 궁금합니다. 평균 1강의 시간 알려주셔도 감사합니다

Related Contents

👉 질문의 내용과 관련된 강의 제목을 알려주세요 (ex. 제목과 문단 Headings & Paragraph)

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

ddd

ddddd

HTML훈련 Receipt 마크업 확인 부탁드립니다!

Bug Report

👉 .receipt 클래스 아래에 있는 span(발행일)을 수업을 따라 작성 하였을 때, css 적용시 결과물과 다르게 barcode의 하단에 위치합니다.

Related Contents

👉 HTML 훈련 - Receipt : 03:57 ~ 04:30에 마크업 부분

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

goormIDE에서 html preview가 안보여요

Question

goormide에서 연습하고 있는데 윈도우 쓰고 있어요. Open preview라는 버튼이 없어서 미리보기를 눌렀는데 흰 화면에 아무것도 안보입니다. 왜 이럴까요?

Related Contents

👉 강의환경세팅

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

position:absolute offset:0

Question

👉 이곳에 질문을 남겨주세요

<style type="text/css"> .box{width:500px;height:500px;border:1px solid red;margin:0 auto;} .box1{background:red;width:10px;height:10px;} .box2{position:absolute;background:red;width:10px;height:10px;} </style>

이런경우에는 포지션엡솔루티에다가 죄표값을 주지않은 상태인데요
왜 박스1아래로 떨어지는건가요 ???
엡솔루티에 좌표값을주지않으면 원래잇어야할 블록형태로 바끼기떄문에 박스1 아래로 떨어지즌 건가요??
답부탁드립니다

모든 포지션값에서
릴레이티브든 엡솔이든 좌표값을 안쓰면 무의미하게 원래잇어야할곳으로 가는건가요??

Related Contents

positiom:absolute2

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

다음 챕터

Question

👉 김버그님 ! 강의 잘 보고 있습니다 : )
다음 챕터는 언제 쯤 연재 될까요 ?!

position:fixed absolute relative 마진0 오토

Question

👉 position:relative;width:1200px;height:50px;margin:0 auto;

position:absolute;width:1200px;height:50px;margin:0 auto

포지션의경우스태틱을 제외한요소들은 다 띄워진애들이라고 배웠는데요
릴레이티브일경우는원래위치를 기억한채로 즉 스태틱 완전 바닥에 깔려잇는 블록을 기억한채로 띄워진 놈이니깐 마진 0 auto 가 먹히는거고??

엡솔루티는 스태틱을 기반이아닌 기준으로 띄어진놈이니깐 원래위치기반이 아니니깐 그냥붕뜬애라서 마진 0 오토가 안먹히는지요 ??
너무나 궁금합니다

근데또 fixed 도 마진0 오토가 안먹네요 이건왜인지요 ?

버그님 답주세요 ㅎ

Related Contents

👉position:absolute2

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

px 값을 음수를 이용하여 입력하는 것이 바른 코딩의 방식인가요?

Question

👉 (강좌차수는 밑에 있습니다)
저는 profile을 colum방향으로 flex를 준 뒤, justify-content: space-between를 입력하고 name에 margin-bottom값으로 - 20px을 주어 name과 location 사이의 거리를 좁혔습니다.
이렇게 px값을 음수를 이용하여 입력하는 것이 올바른 코딩 방법인지. 실무에서도 쓰이는지에 대해 여쭙고싶어요!

Related Contents

👉 css-flexbox훈련3

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

이슈를 생성합시다

새로운 이슈!

08_영수증 에서 h1 안에 a를 찾지 못했는데 a에 스타일을 주신 걸 봤어요

Question

👉 08_영수증 에서 h1 안에 a를 찾지 못했는데 a에 스타일을 주신 걸 봤어요
그리고 또 궁금한 것이 있는데

• {
  margin: 0;
  box-sizing: border-box;
  }
  항상 이렇게 시작하시잖아요
  마진:0은 화면에 마진 하나도 없이 꽉채운단 건데
  박스사이징 보더박스는 정확히 무슨 의미인가요??

Related Contents

👉 질문의 내용과 관련된 강의 제목을 알려주세요 (ex. 제목과 문단 Headings & Paragraph)

08_영수증

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4/lesson/976554/receipt
👉 참고할 스크린샷이 있다면 함께 남겨주세요

audio파일이 실행이 안되요

Question

👉audio태그랑 controls속성 사용해서 파일 삽입했는데 노래 재생이 안되요ㅜ어떻게 해결하나요

Related Contents

👉Html강의중 미디어 파일 media 강의 내용입니다

Screenshots (optional)

👉

새로운 이슈

새 이슈

새 이슈를 만들었습니다.

GET/POST에 관해서

이전의 input강의 에서는 method 속성값에 GET을 쓰셨고, 이번에는 POST를 이용하셔서 그 차이점을 찾아보았습니다.

get : action에 입력한 URL에 파라미터의 형태로 전송, 주소 표시줄에 입력한 내용이 나타나며(=보안에 취약) post에 비해 비교적 작은 양의 데이터만을 서버로 전송가능

post : header의 body에 포함해서 전송, 입력된 내용의 크기에 저한을 받지 않고 입력한 내용이 노출되지 않기 때문에 회원가입, 로그인 시 ,,등등에 많이 사용된다.

​
----------그렇다면 여기서 생기는 의문점. 왜 그럼 post가 더 좋은 속성인 것 같은데 왜 굳이 둘을 나눠서 GET을 사용하는 것인가요?
데이터 양을 관리해서 처리하는 시간을 줄이기 위해서일까요??

escape code와 <pre>

Question

👉 문단 안에

,이란 글이 있어서 이걸 텍스트로 알 수 있도록 escape코드를 사용하셨습니다.
근데 전에 강의에서

,라는 태그가 내가 적은 그대로를 나오게 하신다고 하셔서 활용하려고 
태그를 썼는데 잘 안나와서요ㅠ 제가 잘못 
태그를 썼는지 아니면 여기에 활용하는게 아닌지 이유들이 헷갈립니다.

Related Contents
👉

HTML 훈련 Google Search Result Item강의
Screenshots (optional)
👉 참고할 스크린샷이 있다면 함께 남겨주세요

HTML을 run 할 수 있는 페이지의 경로와 개념을 잘 모르겠어요!

Question

👉 즐겁게 수업을 듣다가 제목과 문단 예제를 나도 해봐야지 하는 순간, 깨달았어요. 이걸 '어느 페이지를 열어서' run 해야하는 지에 대한 개념부터(yeah, this is only a beginning!) 제게 없다는 것을요! (우선 맨 처음엔 F12를 열어서 빈 탭에 입력해볼까, 메모장에 입력해서 이걸 어떻게 하는 건가, 그런데 영상에서는 화면이 달랐는데...Github는 자료실 개념인 것 같고...) 쥬피터 노트북을 학교 수업에서 들으면서 따라했었는데, 영상에 나온 링크를 따라가려다 이후에 그러한 페이지의 범위? 컨셉? 등을 모르고 카피만 하고 넘기고 있었더라고요. 질문 요약 실패. 일단 다양한 시도와 검색을 하면서 학습하고 있겠습니다!

Related Contents

👉 제목과 문단 Headings & Paragraph

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

Another test

asdfasdfm,asndf,

sdfasdf
asdf
asdf

dfdf

리스트 Lists, 정의 리스트 Description List 강의 오류

Bug Report

1. 리스트 Lists 강의 영상 오류 (소리는 강의 내용에 맞게 나오는데 영상이 Image 이론 부분 나옴)
2. 정의 리스트 Description List 실습 영상 없음

Related Contents

1. 리스트 Lists : 시작 부분

Screenshots (optional)

dd tag의 자식으로 ol tag를 사용해도 될까요?

Question

👉 description data tag의 자식으로 ordered list tag 를 사용해도 될까요? 강의 예제를 실습하면서 제시된 '학습' 관련 예제를 다음과 같은 코드로 구현을 해도 되는 지 의문입니다. 강의의 원 의도는 위 코드로 구현하는 것으로 생각됩니다만, 아래와 같은 방법으로 구현을 했을 때 문제가 없을까요? 코드와 preview 했을 때의 결과 스크린샷으로 첨부합니다. (순서 동일)

Related Contents

👉 정의 리스트 Description List

Screenshots (optional)

👉

표 table의 세로헤드는 어떻게 만들면 좋을까요?

Question

👉 표 table의 세로헤드는 어떻게 만들면 좋을까요? 이 시간에 배운 건 로우(가로바탕의 표기법)이 잖아요
그럼 세로로 th를 쓸때는 어떻게 th 항목을 모아서 그룹화 시킬 수 있는 건가요??

Related Contents

👉 표 Table(1)

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

form이 제대로 만들어진걸까요?

Question

👉
안녕하세요! 김버그님! 처음 인사드립니다.
공부하던 중에, form 작성을 직접해보다가 김버그님 강의 영상과 다른 화면처럼 구현되는 것 같아 문의 남깁니다.
제가 만든건 뭔가 되게 오래된 컴퓨터 화면 느낌?
김버그님이 만드신 건 깔끔한데
혹시 다른 이유가 무엇일까요?

Related Contents

👉 Form(3) - Label

Screenshots (optional)

👉

제가 만든 화면이고

김버그님... 화면입니다 ㅎㅎ

새로운 이슈

새 이슈

새 이슈를 만들었습니다.

Vue. js 와 Ember.js에 대해

Question

👉 안녕하세요 김버그님! ㅎㅎ Vue.js와 Ember.js 가 중요하다고 indeed job description에 나와있더라고요

Define and extend the technical architecture for our online application front-ends using Vue.js and Ember.js Javascript framework. Your skills will be leveraged to develop single page applications such as online banking services, application forms, online calculators, and financial planning tools.

여기서 Vue.js 그리고 Ember.js가 하는 역할이 어떤 역할인지, 어떤 개념인지 그리고 어떻게 배우면 되는 지가 궁금했어요!

Related Contents

👉 질문의 내용과 관련된 강의 제목을 알려주세요 (ex. 제목과 문단 Headings & Paragraph)

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요!

h1에 한부분 strong을 넣었는데 h1 전체가 적용됐어요

Question

👉

Be Really Excellent
구름EDU 클라우드 SW교육환경

이렇게 해서 "Be Really Excellent"만 이 적용되어야 하는데
저는 밑에 "구름EDU 클라우드 SW 교육환경"까지 다 적용됐습니다.
어떻게 해야하나요?

을

밖으로 빼내면 위에 있는 내용에 내용이 붙습니다.

Related Contents

👉 링크 Anchor 단원입니다.

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

테스트용 이슈입니다 이것도 바꿔야지

Review

👉 테스트용 이슈입니다테스트용 이슈입니다테스트용 이슈입니다테스트용 이슈입니다테스트용 이슈입니다

오 Patch가 이렇게 쉽게 된다고? 55655!!!!

중복질문입니다.

Question (1)

Placeholder가 적용이 안되요.

Related Contents

Form(input) 강의편을 보면서 따라하고 있었습니다.

파일을 첨부할 수 있는 을 만들었는데, 영어로만 뜨더라고요.

그래서 내가 만약 <input type="text" , "email" or "password"/> 처럼 안에다가

placeholder 태크를 넣는다면,

input type="file"도 내가 원하는 이름으로 바꿀 수 있을거라고 생각했습니다.

그런데 적용안되길래 질문을 드립니다.

인풋 타입 파일은 HTML 범주안에서 한글로 수정이 불가능 한가요?

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

Question (2)

Value 값을 넣을 때랑 안넣을 때랑 return 값이 똑같이 돌아오는거 같은데
그러면 value값을 따로 넣어줄 필요가 없는건가요?

Related Contents

From 'Form(5) - Select & Option'

이 부분 강의를 듣고 있다가 강의가 마지막 쯤 알려주신 내용에 대해서

스스로 작성을 하고 있었습니다.

그러다가 문뜩 value 값이 없을 때 ? 라고 뜨셨는데(버그님 화면에서는)

제 화면에서는 value값이 없을 때 > < 이 괄호 안에 있는 텍스트가

리턴값으로 넘어가는거 같습니다.

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

<script> 질문.

Question

👉 이곳에 질문을 남겨주세요

<script> 를 제일 아래에 이용하는것과 태그에 쓰는것과 무슨 차이가 있나요? 어떤 분은 에 쓰는걸 봐서 차이를 알고 싶습니다. 읽어주셔서 감사합니다 ^^ ## Related Contents 👉 질문의 내용과 관련된 강의 제목을 알려주세요 (ex. 제목과 문단 Headings & Paragraph) ## Screenshots (optional) 👉 참고할 스크린샷이 있다면 함께 남겨주세요

강의 초반인데요 HTML 태그 실습은 어떻게 하면 되나요?

Question

👉 HTML 태그 실습은 어떻게 하나요? 강의 실습을 할 수 있는 플랫폼을 알려주시면 좋을것 같아요
👉 그리고 태그 작성하실 때 "Tab" 키 처럼 안으로 들여쓰기를 하는 이유는 무엇인가요?

Related Contents

👉강조 Emphasis

프리뷰창 어떻게 띄우신건가용

Question

👉 이곳에 질문을 남겨주세요

2분53초대에서 프리뷰창을 띄워서 코딩한거 결과물을 보시는데 어떻게 하는지 알려주셨으면 좋겠어요 ㅠㅠ
그리구
이 아니라
를 사용하시는 이유가 뭔가용? 자동완성에는
로 나오는데 둘이 차이점이있나요

Related Contents

👉 질문의 내용과 관련된 강의 제목을 알려주세요 (ex. 제목과 문단 Headings & Paragraph)

강조 Emphasis

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

df

dfddd

CSS 강의 "[실습] Typography Library 제작"에서 typography,css의 body 스타일 잘못 된것 아닌가요?

Bug Report

typography.css파일 작성에서
body스타일에서 letter-spacing 코드가 잘못된 것 같습니다.

body { letter-spacing : -0.015em}
으로 작성해놓으셨습니다.
개발자 도구를 키고, 각 태그마다 letter-spacing을 확인해봤는데 -0.24px로 동일합니다.
폰트의 크기에 상관없이 letter-spacing이 -0.24px이 나온것을 보면 오류가 있는것 같습니다.

* {letter-spacing: -0.015em}
위와 같이 작성하는것이 맞는 것 같습니다.

제가 잘못 생각한거면 설명해주시면 감사하겠습니다.

Related Contents

[실습] Typography Library 제작
08:13 부터

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

ddd

ddddd

<p> 태그 글자 크기 질문 있어요!

Question

👉 heading 태그 설명해주실 때, h1 ~ h6까지 알려주셨는데요.

태그에는 글자크기를 설정하지 않았는데도 h2 크기네요. 혹시

태그의 글자크기도 수정이 가능한건가요?

Related Contents

👉 제목과 문단 Headings & Paragraph

(예시) Heading 레벨 진짜 신경 안 써도 되나요?

Question

Heading 레벨 진짜 신경 안 써도 되나요?
버그님께서 일단 heading 쓸 때는 레벨 같은 건 신경쓰지 말라고 하셨는데ㅠㅠ
죄송해요 못 믿겠어요ㅠㅠㅠㅠㅠㅠㅠㅠ

Related Contents

👉 제목과 문단 Headings & Paragraph

New Issue

뉴 이슈 테스트

• 안녕하세요
  • 또다른 안녕하세요
• 반갑습니다!!!

커리큘럼은 따로 제공은 안해주시는거 맞나욥!?

Question

👉 이곳에 질문을 남겨주세요

video랑 audio편 보고있는데요! HTML커리큘럼을 작성해두신게 있더라구요! 컴퓨터 사용을 못하고있을때나 침대에 누워있을때 보면서 복습하면 좋을거같다는 생각이들었는데 따로 제공은 안해주시는건가요? 궁금해서 여쭤봅니답

Related Contents

👉 질문의 내용과 관련된 강의 제목을 알려주세요 (ex. 제목과 문단 Headings & Paragraph)

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

aria-label과 sr-only의 차이점을 잘 모르겠어요.

Question

👉 aria-label과 sr-only의 차이점을 잘 모르겠어요.

 각각 사용할 때 특정 전제 조건이 있는건지도 잘모르겠네요. ㅜㅜ 궁금합니다!

Related Contents

👉 질문의 내용과 관련된 강의 제목을 알려주세요 (ex. 제목과 문단 Headings & Paragraph)

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

css랑 Javascript 강의도 나오나요?!

Question

👉 안녕하세요! css랑 Javascript 강의도 오픈예정이신가요?!
너무 쏙쏙 들어오게 설명 잘해주십니다 ㅠㅠㅠ흐엉엉

Related Contents

👉 김버그의 버그 없는 HTML

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

Test from local

TEst f35345ㄷ45ㄴㄹㅁㄴㅇㄹㅁㄴㄹ

ㅣ미밈

Q, Placeholder가 적용이 안되요. & value 값이 있을 때랑 없을 때 차이를 모르겠어요.

Question (1)

Placeholder가 적용이 안되요.

Related Contents

Form(input) 강의편을 보면서 따라하고 있었습니다.

파일을 첨부할 수 있는 을 만들었는데, 영어로만 뜨더라고요.

그래서 내가 만약 <input type="text" , "email" or "password"/> 처럼 안에다가

placeholder 태크를 넣는다면,

input type="file"도 내가 원하는 이름으로 바꿀 수 있을거라고 생각했습니다.

그런데 적용안되길래 질문을 드립니다.

인풋 타입 파일은 HTML 범주안에서 한글로 수정이 불가능 한가요?

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

---

Question (2)

Value 값을 넣을 때랑 안넣을 때랑 return 값이 똑같이 돌아오는거 같은데
그러면 value값을 따로 넣어줄 필요가 없는건가요?

Related Contents

From 'Form(5) - Select & Option'

이 부분 강의를 듣고 있다가 강의가 마지막 쯤 알려주신 내용에 대해서

스스로 작성을 하고 있었습니다.

그러다가 문뜩 value 값이 없을 때, 주소값 마지막에 ' ? ' 라고 뜨셨는데(버그님 화면에서는)

제 화면에서는 value값이 없을 때 > < 이 괄호 안에 있는 텍스트가

리턴값으로 넘어가는거 같습니다.

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

ㅁㄴㅇㄹㅁㄴㅇㄹ

ㄴㅁㅁㄴㅇㄹㅁㄴㅇㄹㄴㅇㄹ

섹션엘리먼트요소 유효성 검사 오류

Question

👉 강의 잘 듣고있습니다 다름이 아니라 섹션엘리먼트요소에 제목태그 h1적어주셔야한다고 하셨는데 html파일만 유효성 검사해보니 문법오류라고 떠요 ㅠㅠㅠㅠ 그리고 aria-label 쓴거도 문법 오류라고 뜨는데 왜 그런거죠? 사용해도 괜찮은건가요? ㅠㅠ

Related Contents

👉 질문의 내용과 관련된 강의 제목을 알려주세요 (ex. 제목과 문단 Headings & Paragraph)

Screenshots (optional)

👉 참고할 스크린샷이 있다면 함께 남겨주세요

HTML 훈련 - Instagram User Profile 배운 것 실습 중인데 css가 안 먹힙니다!

Question

👉 안녕하세요 김버그님! 인스타그램 프로필 만드는 훈련 수업 듣고, 제 프로필도 똑같이 만들어보고 싶어서 시도해봤는데 css가 적용이 안 됩니다. 이유가 궁금합니다!

Related Contents

👉 HTML 훈련 - Instagram User Profile

Screenshots (optional)

👉
파일을 이렇게 새로 만들고
https://user-images.githubusercontent.com/74785240/99823583-ebbcb100-2b97-11eb-86a8-cc5b4a2f4456.png
제공해주신 css 코드는 그대로 적어서 pstyles.css로 저장하고,
수업에서 배운 html 코드는 내용을 바꿔서 작성했습니다.
css파일 이름도 바꿨습니다!
그런데 결과물 확인해보면 css가 안 적용되는데 이유가 궁금해서요!
css파일의 어떤 부분을 수정하면 제가 수정한 코드에도 적용돼서 결과물을 확인할 수 있을까요.