개인 자료란 (JE)

  서버 커뮤니티

Profile MoPE 대표칭호 없음

Mo_PE__ b08b361e233b461d9108c83de50835a1

Profile

3번째 강좌인데 벌써 뭘 할지 고민이 되기 시작했습니다.


사실 html이나 css는 개인의 경험에 의한 센스로 작성되는 경우가 더 많습니다.

물론 체계적인 회사에 들어가면 어떤식으로 작성해야하는지 룰이 정해져 있습니다. (아닌 곳도 많은건 안비밀..)

class 명과 id는 어떨 때 써야하며 이름은 어떻게 정해야하는지..

section 구분은 어떻게 할 것인지..

css속성들 적어 내려갈 때 몇칸을 들여쓰기하고 작성 할 것인지..

css속성들의 순서는 어떻게 작성을 하는지..

등등 정말 수없이 많이 있습니다. ( 네이버가 몇년전에 공개한 컨테이너가 a4사이즈로 20페이지가 넘어가던가...)


그 룰은 회사마다 모두 다릅니다.

하지만 이렇게 룰이 정해져 있다고 해도 어떤 상황에서 어떤 속성을 쓰고 어떤 태그로 html작성을 하고 이런 것들은 순전히 개인의 센스이며 능력입니다. 이거는 누가 특별히 가르쳐줄 수가 없습니다.


사실상 제가 1강 2강에서 특별히 가르쳐 드린게 없는데.. 그게 다입니다..


간단한 사이트부터 어려운 사이트까지 혼자서 직접 작성하면서 이럴때 어떤걸 쓰면 좋다라는걸 느끼시는게 가장 중요합니다.

애플 메인페이지부터 시작해서 네이버 메인페이지까지 직접 작성해보면서 메뉴는 ul li가 좋구나.. 링크는 a로 하면 되는구나.. 등등을 직접 느껴보는게 최고입니다.


html 태그의 종류는 수도 없이 많이 있습니다. 

div, ul li , ol li, table, tr, th, td, span, a, img, h1~h6, button, input 등

정~말 많습니다.

css도 마찬가지입니다. 

margin, padding, background, color, font-size, display, list-style, border 등등 

애도 셀 수 없이 많이 있습니다.

그렇기 때문에 이 모든걸 제가 하나하나 찝어서 말해드릴 수가 없습니다.

그냥.. 여러분이 생각하는 어지간한건 다 있다고 생각하시면 됩니다.


제목에 마우스를 올리면 배경색이 바뀌고 폰트가바뀌고 색이 바뀌게 하고 싶다?

됩니다.

css로 

이름:hover { 

    font-size: 20px; 

    background: blue;

 }


버튼을 누르면 슬라이드가 넘어가게 하고싶다? 이것도 가능합니다. 

js로 작성하는 방법도 있고

input과 label태그를 사용하는 방법도 있습니다.


css는 여러분이 생각하는 것들 어지간히 가능합니다.

안되는 것은 몇가지 있는데 

ul > li > a  를 선택한 상황에서 a에서 뭔가 액션이 일어났을 때 부모요소에 있는 ul에 뭔가를 할 수 없습니다.

그러려면 js로 건드려야 합니다.

이게 무슨 소리인가 싶을텐데.. 하다보면 알게됩니다.

그리고 아직 css버전은 스크롤 감지를 하지 못합니다.

스크롤 감지 또한 js로 작성하면 됩니다.


저는 최대한 웹페이지에서는 js를 최소화 하자는 주의입니다.

그래서 js강의는 최대한 피하려하고 있기도 하고 js 강의는 이미 hk포럼에 있기때문에 하지 않으려합니다.


정말 많은 고민을 한 끝에.. 

그냥 조금 더 응용과정으로 뛰려고 합니다.


scss라는 걸 사용해서 css를 더 효율적으로 관리하고 수정을 진행하고 하는 방법을 알아보려합니다.

궁금하신건 언제든지 댓글에 물어봐주시면 성심성의것 질문에 답변을 해드리도록 하겠습니다.

Warning
댓글이 없습니다.

새로운 댓글을 등록해 주세요!

뉴스 및 창작물
/files/thumbnails/483/916/003/262x150.crop.jpg?20241127115329

레드스톤

[노트블럭 커버] 뉴진스 - ETA 2

노트블럭전문가

2024-11-27

0

/files/thumbnails/150/925/003/262x150.crop.jpg?20241123005717

건축

응답하라 1988 ?

팀뉴일리시

2024-11-23

4

/files/thumbnails/761/908/003/262x150.crop.jpg?20241025153749

건축

서울 숭례문(崇禮門) 6

KHC

2024-10-25

2

/files/thumbnails/578/899/003/262x150.crop.jpg?20241010142350

건축

경주 월정교 1

KHC

2024-10-10

2

/files/thumbnails/219/899/003/262x150.crop.jpg?20241009200950

건축

송전탑+도시 2

dbasd12

2024-10-09

2