신입 개발자의 탈탈 털리는 마크업 이야기 | 나만 몰랐냐 코린이들아....⭐ | HTML, CSS 나쁜습관

[@jihaye9805]

실무에서 일해본 사람만 말해줄 수 있는 리얼 꿀팁같아요 ,,, 저는 배우는 입장이지만 뭔가 쏙쏙 들어와요 !!!!! 이런 컨텐츠 넘나넘나 좋네요 ㅠㅠㅠㅠㅠ

[@NA-jq4iq]

유용하네요~~ 잘 보고 갑니다 !

[@spacepublisher8744]

회사를 다니시면서 이런저런 '비판(비난이 아닌 비판은 성장의 발판이지요.)'을 받으시고 계시네요. 좋은 사수분을 두신것 같습니다. 사수님께서 여러모로 신경을 많이 써주고 계시는걸로 보이네요. 다만, 받으신 '비판'에 대해 저는 점 생각이 달라서, 제 의견도 한번 들어보셨음 좋겠습니다. 모쪼록 도움되시길 바랍니다. [1] "태그의 고유 스타일 속성을 무시하지 마라. 에 font-size, font-weight 웬만해선 정의하지 마라. 그게바로 시멘틱한것이다." 동의할 수 없습니다. HTML Default Style은 W3C가 별도의 Style 정의없이도 그런데로 문서답게 나오라고 정의를 해둔것이지, 그 스타일을 재정의하는것이 나쁠것은 없습니다. 스타일을 재정의하는 행위는 시멘틱과 관련이 없습니다. 시멘틱은 '태그명'과 관련있는 개념입니다. 시멘틱은 의미에 맞게, 의미를 구체적으로 하라는것이며, 이는 '스타일'이 아니라, '태그명'으로 결정되어집니다. 게다가, 그 어떤 웹디자이너도 의 Default font-weight가 700임을 숙지하고 있지 않으며, 따라서 디자인에 반영하지도 않으며, 따라서 재정의해야만 합니다. [2] 'ID선택자는 쓰지 마라. 안티패턴이다.' 저는 이 말이 마치 자바스크립트에서 const 는 재정의가 불가하니까, var를 써라라는 말과 같다고 생각합니다. ID선택자는 유연성이 떨어질지언정, 하염없이 퍼져나가는 스타일 상속의 흐름을 끊어주어서 '안정적'이기도 합니다. CLASS 선택자와 ID 선택자가 서로 다른 '특징'이 있을뿐이지, 둘 다 엄연히 정식으로 지원하는 문법이고 쓰라고 만들어놓은것인데, 마치 불변의 법칙처럼, ID 선택자는 악이고 CLASS 선택자는 선이라는 발상은 동의하기 어렵습니다. 유지/보수 업무를 하다보면, 비슷한 UI를 또 만드는것(재사용성이 떨어지는 상황)도 물론 무척 번거롭지만, A라는 작업을 했는데, B가 터질수도 있다는 불안감보다는 훨씬 낫습니다. ID선택자는 잘만 사용하면, 어디로 튈지 모르는 캐스케이딩의 흐름을 잘 끊어주어서, 더욱 안정적인 코드를 만들 수 있다고 생각합니다. 그러나, 현업에서 많은 사람들이 'ID선택자를 쓰지마라'라는 말을 많이 하는것은 사실이긴합니다. 하지만, 그 말을 하는 그 모두가 정말 뼈저리게 스스로 고민을 하고 ID선택자는 쓰면안된다는 결론에 도달았다고 느껴지진 않습니다. 관용적으로 되버렸을뿐이죠. [3] "z-index 헤더 : 1-9, 섹션(메인 컨텐츠) : 10-19, 푸터 : 20-29" 동의할 수 없습니다. 아시다시피, X가 가로, Y가 세로, Z는 '깊이'입니다. 말씀하신 '헤더', '컨텐츠', '푸터'는 세로 배치, 즉 Y축 입니다. 특별한 구조(예컨대, 헤더가 픽스되어 컨텐츠 위로 올라가는 구조)를 제외하면, 저 셋의 z-index는 '같게' 하는것이 직관적입니다. 저 셋에게 position relative와, 동일한 z-index값 (예컨대, 10-10-10)을 정의하길 오히려 저는 권장합니다. + 추가적으로 제가 영상을 보면서 느끼기엔, z-index에 대해 조금 오해를 하고 계신것으로 보였습니다. 제 예상이 맞다면 이 예제가 의아하실겁니다... jsbin.com/hidupogopa/edit?html,css,output [4] "개발자도구 Computed로 수정하라." "주석처리 + 밑에 새로운 스타일, 나중에 주석 지우기는 비효율적이다." 정말 비효율적인게 맞나요? 개발자도구>computed에서 한 작업은 저장이 되지않고, 다시 에디터로 돌아가서 두번 작업해야되는데, 정말 이게 효율적인게 맞을까요?... 저는 아니라 보는데요... 왜 비효율적인지 모르겠습니다 그게. 또한, 아마 vscode live server 익스텐션 쓰시는것 같은데, 그거쓰면 정말 빨리 작업이 가능한데말이죵... 게다가, 아시다시피 CSS는 '스코어' 개념이 있습니다. '올바른 속성 값'을 넣는것과 동시에 '적용 우선순위 우위' 두가지를 만족해야하죠. 근데 Computed는 내가 CSS작업을 할때 적용 우선순위를 잘 했는지 확인할 수 없어요. 두번 작업할 수 있습니다. Computed는 현재 포커스된 그 엘리먼트 하나를 단독을 대상으로 고칩니다. 이는 CSS의 캐스케이딩 문법을 무시한채, 그 부분만 한번 바꿔볼때나 쓰는거지, 내가 CSS에서 선언한 부분은 그 부분에 해당하는 모든 부분이 동시에 바뀝니다. 하나만을 단독으로 바꾸는 것과 이미 문법에서 차이가 있어요. 따라서, 제 생각엔 오히려 Computed를 쓰는 방법은 비효율적입니다.

[@KyungA]

안녕하세요! 제가 영상에서 말했다시피 말을 조리 있게 잘 하는 편이 아니라서 너무 한정적인 부분만 언급한 것 같네요 자세한 내용들은 제 블로그 글도 같이 봐주셨으면 좋겠습니다~ 이렇게 토론식의(?) 댓글이 달려서 정말 기쁩니다! 제가 영상에서 말했던 입장들을 정리해서 말해보겠습니다😊 확실히 코딩은 개발자의 관점에따라 입장이 매우 다를수도 있구나를 댓글을 통해서 느꼈습니다 감사합니다! [1] font-size, font-weight 같은 경우는 예를 든 것이지 이 스타일만 말한게 아닙니다...! hn 태그는 heading 태그로서 쓰이는데 제목 태그가 마치 (예를 들어) 일반 텍스트 태그처럼 보이게끔 스타일을 설정하는건 잘못된 방법이라고 생각합니다 이 내용은 CSS만 설명하는게 아닌 HTML 태그도 같이 엮어 말하고 싶은 내용인데 영상에는 제대로 설명이 안되었나 봅니다 아무래도 둘을 분리한채 말할 순 없죠 제가 하고 싶었던 말은 버튼 기능을 하는 요소인데 span 태그로 작성하여 버튼처럼 보이게끔 스타일을 정의하는건 잘못된 방법이다! 와 같은 말을 하고 싶었던 것입니다 [2] 이거는 프로젝트에따라 다르게 판단해야할 부분인 것 같습니다 제 발언이 일반화처럼 들린걸까요? 계속해서 프로젝트에따라 와 일부분만 개발을 해야 할 경우를 언급하고 있습니다ㅠㅠㅠ 영상에서 계속 말했다시피 일부분만 개발해서 붙쳐야하는거면 그게 어떤거냐에따라 id 태그를 아예 쓰면 안되는 경우도 있답니다 쓰면 안된다! 는 아니지만 재사용성이 매우매우 떨어지는건 팩트라고 생각합니다 [3] 음.. 잘 이해가 안되는데, 그 안에 들어간 각각 요소들의 z-index도 따로 설정을 해줘야할텐데 부모 태그를 다 동일하게 줄 순 없지 않나요? 애초에 z-index를 쓰게 되는 것 부터가 특별한 구조라고 생각하는데... 그것을 제외하고 z-index를 굳이 쓰면서 동일하게 적용하는 사례가 무엇이 있을까요? 이 부분에 대해서 제가 잘 몰라서 그런건지 궁금하네요 [4] 작업이 저장되지 않으니 이 방법을 쓰라는 것 같습니다 제가 영상에는 언급을 못하는 것 같은데, 그래서 보통 이 방법은 수정, 유지보수 작업때 많이 쓴다입니다 초기 작업하는데 저런 방식으로 작업을 하진 않겠죠...! Computed 는 확인용이지... Computed를 보고 개발자 도구에서 일일이 수정하라는 뜻이 아니었습니다

[@spacepublisher8744]

@@KyungA 블로그 일독하겠습니다! ㅎㅎ z-index는 말씀하신대로 특별한 케이스가 아니면 안하셔도 됩니다. z-index는 동일한 수치를 적용해도 됩니다. 또한, z-index에 대해 잘못 알고 계실것으로 느껴지는 부분은 7:38 부분입니다. 이미 형제 관계인 .header는 z-index가 1이고 .section은 3으로 이미 앞쪽에 있습니다. 여기서 .header>.box1-1에 3을 줘도, .section의 3과는 무관합니다. 그래서 '밑에 다 수정해야 하는 상황'이 아니라, 그냥 냅둬도 됩니다.ㅎㅎ 링크 드린 예제 꼭 보셔요!

[@김별이-f5x]

👍🏻👍🏻

[@KyungA]

@@spacepublisher8744 오 그렇군요! 제가 놓친 부분이네요ㅠ 설명 감사합니다!!

[@냐냠-p7m]

경아님 너무 좋아요 말을 재밌게 하셔서 영상 보는 맛(?)이 있어요

[@IfKnewEarlier]

오호 감사합니다 처음 공부하는 입장에서얻어갈 내용들이 많네요

[@SUDAL0928]

퍼블리셔 전직을 준비중인 웹디자이너예요. 지금 회사에서는 사수가 없어서 제 맘대로 홈페이지 관리를 하고있거든요.. 영상에서 말씀해주신 내용들 보니까 아직 배워야 할 게 무지무지 많은 것 같아요 ㅠㅠ 앞으로도 업무 관련 얘기 많이 올려주심 좋을 것 같아요 ㅋㅋ 구독하고갑니다

[@_JEh]

전혀 안부족한 완벽한 설명,,

[@qkrdhrska123]

이런 실무를 다룬 영상 너무좋아요!!! ㅠㅠ 그리고 감사합니다!!!

[@sohee304]

업무할때 Scss로 들여쓰기 엄청했는데 저만 편하고 개발자분들한테는 되게 안좋은거였군요 ㅠㅠㅠ 이 영상 안봤으면 정말 큰일날뻔했네요😅

[@임영빈-r5w]

요새 이런 팁들이 너무 필요했는데 지금 시기에 보게돼서 너무 다행이네요.. 감사합니다! 늘 응원합니다~ 멋있어요

[@KyungA]

영상 봐주셔서 감사합니다🥰

[@bittersweet7484]

음..현업 디자이너겸 퍼블리셔로서 이건 회사마다 다른거 같습니다..저희회사같이 SI로 혹은 인하우스 작업을 많이 하면 (구축을 작업하는작업) 작업환경은 상당히 다릅니다. ㅎ h1태그같은 시멘택 태그에도 스타일을 꼭 붙여야 되겠죠 ㅎ 님같이 기존에 있는 html에 붙이는 과정이라면 님 말씀이 맞겠지만...대부분은 홈페이지 구축을 주로 하기 때문에 초보자들이 이 영상을 보면 시멘택 태그에는 꼭 스타일을 넣지 말아라로 들려서 상당한 오해를 불러올수 있는 영상인거 같습니다 ㅎㅎ

[@KyungA]

저희도 si 회사입니다 ㅎㅎ 그리고 그에 맞는 상황 설명도 영상에 말했기 때문에 각자 환경에 맞게 받아들이면 좋을것 같아요~

[@garr-mang]

정말 꿀팁입니당! 저도 그렇게 만만하게 HTML/CSS를 봐왔는데ㅠㅠ반성한방 먹고 들어가요ㅠㅠ 앞으로 더 좋은영상 기대할께요 구독하고 갑니당

[@me-cx9js]

너무 잘봤습니다! 꿀팁 대박이에요 경아님 영상은 유익하기도 하고 긍정적인 에너지를 얻고가는 느낌이 들어서 너무 좋아요 항상 기다리고있습니다ㅎㅎ 꿀팁 감사합니다

[@KyungA]

영상 봐주셔서 감사합니다🥰

[@renab9138]

너무 유익한 내용이네요!!ㅎㅎ기본기는 정말 중요한데 학원에서 배우는건 한계가 있다보니.. 역시 현업에 들어가야 훨씬 더 많이 공부하게 되는것 같아요ㅎㅎ 영상 잘 보고가요😁 남은 연휴 즐겁게 보내세요!

[@KyungA]

영상 봐주셔서 감사합니다 새해 복 많이 받으세요💪🏻🥰

[@jeongminshin8046]

현직자에게서 얻을 수 있는 꿀팁이네요 +_+ 일을 이렇게 배우나봐요 멋있어요 경아님 항상 응원합니다!!!

[@dev-ed]

실무에 도움되는 이야기를 많이 얘기해주셔서 다른분들에게 도움이많이 될 것 같아요. 저도 사수로써 가르치는 입장인데 되려 반성해보게 되네요 다음에 또 좋은 영상 기대할게요

[@youtut]

..이번 컨텐츠 꿀단지네요... 모든 정보가 유용하네요 저는 사수가 없다보니 이런 내용 너무 반갑습니다..ㅜㅜㅜ

[@여름엔소금콩국수]

09:35 이건 정말 처음보는 방식이네요... 국비학원이 참...^^ 처음부터 잘 가르쳐줬으면 좋았을텐데 정말 아쉬운게 많아요 저도 국비로 취업 성공하고 지금은 이직 준비 중인데요 1년 뒤에 보니까 수정할 게 천지라 막막합니다 경아님 영상 보고 꿀팁 얻어가요~

[@여름엔소금콩국수]

그런데 2:38 에서 지적받으신 부분은 현재 어떻게 수정하셨나요? 저도 h1,h2,h3,h4 묶어서 동일한 스타일을 적용하면서 작업하는 편인데 말씀하시는 거 들으니까 갑자기 어렵게 느껴지네욥... h1~h5 대신 span이나 a를 쓰는 게 맞는 걸까요? 특히 로고는 무조건 h1에 넣어서 사용했거든요....ㅠㅠ

[@KyungA]

웹접근성에 맞게 사용하라는 말씀 같아요! 간혹 버튼인데 div 또는 span 으로 만든 버튼이 있고 메인 헤딩, 로고도 아닌데 엉뚱한곳에 h1을 쓰고선 강조하려고 그런거다~ 라고 하는분도 있고! 태그의 고유 속성, 웹접근성에 맞게 사용하라는 말씀이랑 동일한것 같아요!

[@chobab123]

와 진짜 준비하는 사람으로서 다 새로운 내용이네요... 이런 유익한 내용 감사합니다

[@lala-ds5im]

좋은 팁들 감사합니다 ㅠㅠ 학원에서는 웹디배우는데...실무랑 배우는거는 진짜 다른거같네요... 항상 잘보고 있습니다:)))

[@haansoul]

현재 실무 경험 없는 공부 중인 개린이?! 에게는 그냥 얻어가기엔 죄송스러운 경아님의 소중한 경험들이네용!!! 오늘도 감사합니다(꾸벅) 경아님의 개발 공부 이야기는 언제나 흥미롭고 재미있어용💛

[@BYKim-jc4sm]

크로스브라우징의 가장 기본이되는 초석같은 작업이 CSS죠 많이 중요해요~ 아직도 익스를 사용하는 곳도 많아서 크롬의 비율이 높기는 하지만 익스점유율도 국내는 무시 못해요 마크업에서 가독성은 작업자의 편의 부분이라 아마 사수분이 강조 한걸 수도 있어요. 저는 에디터 플러스라는 프로그램을 사용하는 엣날 사람이라서 새로운걸 바로바로 적용 못했어요 그런 엣날 사람들이 있어서 사수급에서 엣날 방식 고수 하시는 분들 꾀있어요 자기가 불편해서 새로운 방식을 달갑게 여기지 못하기도 해요~ 저희때는 코드속성을 달달 외우니 ~ 에디터 플러스도 불편하지 않았지만 지금은 비쥬얼 사용하는데 3글자만 치면 알아서 코드나오고 신세계를 경험했지만 아직도 수정할 때는 에디터플러스가 마냥 편해요~ 경아님도 그런날이 오실거예요 너무 사수말이 옳다고 판단하지만말고 자신의 길을 만드시면 될거 같아요~ 경아님 영상보면서 예전에 나도 저랬는데 하면서 오랜만에 재미나게 봤어요 화이팅 하세요~ 응원하겠습니다.

[@KyungA]

조언 감사합니다🥰

[@까리한여자]

경아님 정말 꾸준히 잘보고있읍니다 ~~

[@infp3054]

너어무너어무재미이있다아아아아아!!! ㅋㅋㅋㅋㅋㅋ 다음 영상 언제나오나요 ㅋㅋㅋㅋㅋㅋ

[@Perro.]

진짜 현직에서 일하시는 개발자분들 모아놓은 커뮤니티(플랫폼 ?)가 있다면 서로서로 정보 공유하고 고민있으면 고수분들께서 답변 해주시는 그런 사이트 있으면 신입분들에게 정말 좋을거같아요.. 물론 저에게도..

[@jieunj6]

H1태그에 스타일지정 하지말란말은 뭔소리인가요.. 아.. 😂

[@jennifer6773]

방금충격 받음요..그럼 어떻게 하란거쥬

[@allen_ios]

ㅋㅋㅋㅋㅋ 역시 말씀을 너무 재밌게 하세요ㅎㅎㅎ

[@김경원-k1y]

1빠!!새해 복 많이 받으세요 경아님!! 근데 기술블로그 티스토리 링크 막힌거 같아요..! 존재하지 않는 페이지라구 하네요! 영상 도움 많이 받아갑니다!

[@KyungA]

바로 수정 하긴 했는데 제 쪽에서는 5번 클릭하면 한번 없는 페이지라고 뜨고...🥺 이게 웬 이상한 오류인가 싶네요...

[@김경원-k1y]

오오오 이제 잘떠요!!! 잘 보겠습니다!

[@커브드데님]

경아님 현직이시자나요! 궁금한게있어요! 웹퍼블리셔는 공부를 다시하려고하는데요 어떤 공부를 위주로 하면 실무에서 더 좋을까요? 영상 잘봤습니다

[@KyungA]

웹퍼블리셔라면 html 웹표준이랑 css 방법론 보면서 최대한 많은 사이트 만들어보는게 좋을 것 같아용

[@커브드데님]

@@KyungA css방법론이요?

[@jennifer6773]

그런데 h1~6에 폰트사이즈 넣으면 안된다는건가요? 또 아이디는 메뉴에 a 앵커태그걸어서 각 섹션에 이동할때 넣어야하지 않나요? 그리고 마크업을 누굴 누구한테 감쌀지 등은 디자이너에게 클래스 네임과 픽셀사이즈까지 지정해서 받지 않는건가요? 일년째 준비중인 초보라..오타에 마크업자체도 힘든데 듣기만해도 어질어질하네요 ㅋㅋㅋ

[@KyungA]

제 말운 hn 태그들이 일반 텍스트처럼 보이면 안된다는 말이었습니다!ㅎㅎ 섹션 이동은 흔한 경우가 아니구요 회사마다 다르겠지만 클래스네임은 보통 퍼블리셔가합니다~

[@junhyeokjeon815]

ㅋㅋㅋㅋㅋ 재밌게 들었습니다

[@utauinureal]

오.. 제트인덱스는 그렇군요 유익하네요

[@박수란-d3o]

경아님 유투브잘 보고 있습니다 웹퍼블리셔 공부하려하는데 노트북or데스크탑 어떤사양쓰시는지 궁금합니다 주변에 요새 앵간한거 포토샵 다 굴러간다, 아니다 성능좋은거 써야한다 말이많아서 구매에 어려움이 있어요ㅜ

[@KyungA]

저는 작곡용 노트북 사서 쓰는데 곤욕입니당 뭐 사야할지 모를땐 무조건 게이밍 노트북!

[@idevbrandon]

저는 언제 취업 한번 해볼까요 ㅋㅋ 프론트앤드 개발자 될려고 아직도 노력중 ㅠ

[@KyungA]

저도요......⭐️

[@이승철-q3c]

scss사용하면서 들여쓰기 너무 좋다고 생각했었는뎅 다 좋은거아니군요 ㅠ

[@namucho266]

귀.여.워.요.

[@일하기싫어24]

10:10 best Tip

[@과거채널-g9g]

진 꿀팁...

[@그냥-e8x]

마크업이 뭐에요?

[@robertmirrortaeguanpark1145]

울 경아 2개월동안 개고생 했누 ㅠㅠ

[@KyungA]

영상에 나온 이야기들을 더 자세히! 알아보고 싶으시다면 제 개발 블로그에 오시면 확인 가능합니다 👉 개발 Blog : kyung-a.tistory.com/ (혹시 블로그 글과 제 영상에 틀린 이야기가 있다면 댓글 부탁드립니다😊) 여러분 안녕하세요. 경아입니다!! 2021년 설날! 다들 새해 복 많이 받으세요💗 벌써 2021년 2월이라니... 정말 시간이 느리면서도 빠르다고(?) 느낍니다 이번 영상은 제가 신입 개발자로 취업을 한 후, 실무에서 느꼈던 생각들, 지적 당했던 나쁜 습관, 몰랐던 꿀팁 등등 담아봤습니다! 사실 저만 몰랐다면 매우.. 쪽팔린... 영상이구요.....😅 그냥... 한 인간의 성장 과정으로 봐주십쇼... 딱히 정보성 영상은 아닙니다 하핳 오늘도 영상 봐주셔서 감사합니다! Instagram : instagram.com/kyung___a___/

[@시로-c4j]

안뇽하세요 .. 얼떨결에 이쪽으로 학원을 다니고 최종목표는 프론트엔드 개발자인데요 ! 디자인도 같이 하고있어서 지금은 디자인이랑 html css 자바 이렇게 배우고있는데 프론트엔드로 가려면 어떤 공부를 더 해야하는지 알수있을까용 ?

[@KyungA]

자바가 아닌 자바스크립트입니다! 신입으로 취업하려면 최소한 바닐라 자바스크립트, 자바스크립트 es6와 리액트 또는 뷰를 공부하셔야할 것 같아요

[@Vienna_R]

4년제이신지 궁금해요..! 비전공자이신건알고요

[@KyungA]

전 고졸입니다~

[@nam-namc]

오늘 진짜 좋은 얘기네요!! 실무경험에서 얻을 수 있는 팁인거같아요👍