TIL 2021.09.15 - 1주차 ✏️

이민영·2021년 9월 15일

엘리스 AI트랙 Today I Learned ✏️

목록 보기

2/10

📍이번주 학습 목표

웹 프로그래밍 기초 배우기

HTML/CSS 로 웹사이트 제작하기

리눅스에 대해 공부하기

Git 에 대해 공부하기

오늘 배운 내용 💪

html, css 학습하여 웹사이트 제작하기

<오늘 복습 할 목록>
1. 웹 사이트 제작시 고려 사항
2. 마진 병합 현상
3. 캐스케이딩

1. 웹 사이트 제작시 고려 사항

1) 웹 표준
= 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격

웹표준은 웹에서 표준적으로 사용되는 기술이나 규칙으로, W3C가 규정한 표준안에 맞춰 웹을 만들어야한다. 즉, 웹 사이트가 웹 표준에 맞는 올바른 HTML,CSS,JavaScript를 가지고 있어야 한다.

2) 웹 접근성
= 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 방식

웹의 아버지라 불리는 팀 버너스리는 '웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.' 라고 하며 모두가 웹의 유익함을 누릴 수 있도록 해야 한다고 하였다. 이와같이 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 웹 접근성을 고려하여 웹 사이트를 제작해야 한다.
디자인의 측면에서는 색맹이나 저시력을 가진 사람들도 웹을 이용할수 있도록 최소 폰트 크기, 색깔을 규격을 지정하여 모두가 웹을 이용할수 있도록 하는 예가 있다. 개발에서는 시각장애를 가진 분들은 화면리더기를 사용하기 때문에 img태그에 alt에 대체 텍스트를 입력해 어떤 정보를 가지고 있는지 알 수 있도록 하는 예가 있다.

3) 크로스 브라우징
= 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법

HTML, CSS, JavaScript를 공부 하다 보면 이 기술이 지원하는 브라우저가 있고 지원하는 브라우저가 없기도 하다. 개발을 할 때도 모든 브라우저가 또는 기기에서 제대로 작동하도록 고려하며 웹 사이트를 제작할 필요가 있다.

2. 마진 병합 현상

<style>
 .box1{margin-bottom: 150px;)
 .box2{margin-top: 100px;}
</style>

<div class="box1">box1</div>
<div class="box2">box2</div>

위와 같은 상황 일때 box1 과 box2 마진이 위 아래로 겹치게 된다.
이런 경우에는 둘 중에 숫자가 큰 값으로 적용되게 된다.
이 경우에는 숫자가 큰 box1의 {margin-bottom :150px;}이 적용된다.

분명 들어본적 있는 개념인데 실제로 html, css 할때는 생각을 안하고 만들었던 것 같다. 다시 한번 머리속에 입력! ✅

3. 캐스케이딩

< CSS의 우선순위를 결정하는 세 가지 요소>
1. 순서
= 나중에 적용한 속성값의 우선 순위가 높음
2. 디테일
= 더 구체적으로 작성된 선택자의 우선순위가 높음
3. 선택자
= style > id > class > type 순으로 우선순위가 높음

점수를 계산해서 설명하시는 분들도 계시던데, 분명 알고 있는 개념이지만 만들때 제대로 인지 하지 못하고 했던 부분이라 다시 한번 머리속에 입력! ✅

+) 오늘 수업에서 느낀 점 🙌
-HTML을 만들때 조금 더 시맨틱하게 만들어야겠다고 생각했다. 나는 main태그는 처음보아서 충격! 띠용! 그리고 속성중에 role 이라는 것도 이번에 처음 알게 되었다. main태그는 특히 인터넷 익스플로러 에서는 지원하지 않기 때문에 role 속성에 main을 꼭 넣어주어야 한다.
role속성도 웹 접근성을 위해 사용되며, 구조와 의미를 더욱 정확하게 전달할 수 있도록 하는 역할을 한다고 한다. 암묵적으로 보통 정해져 있으니 다음부터는 role속성도 넣어야 겠다.

<body>    
    <header></header>
    <main role="main">
      <section class="section1"></section>
      <section class="section2"></section>
    </main>
    <footer></footer>
</body>

-그리고 또 한가지 충격은 CSS에서 나는 selector의 띄어쓰기를 생각없이 썼구나 생각했다. 띄어쓰기는 후손 요소를 선택할때 쓴다. 근데 나는 그냥 썼던거 같다. 위의 예제를 사용하여 보자면

main section .section1{}

이런식으로 main 안에 section 중에 section1 이렇게 쓰면서 띄어쓰기를 했던 것이다! 하지만 후손 요소 선택이 아니기에 section과 .section1사이에는 띄어쓰기를 하면 안된다. 나는 그냥 저렇게 했던거 같은데,,
다시 제대로 이해하고 넘어가야지,, 체크체크 ✅

이민영

프론트엔드 개발자를 꿈꾸고 있습니다 !

이전 포스트

TIL 2021.09.14 - 1주차 ✏️

다음 포스트

TIL 2021.09.15 - 1주차 ✏️

엘리스 AI트랙 Today I Learned ✏️

1. 웹 사이트 제작시 고려 사항

2. 마진 병합 현상

3. 캐스케이딩

TIL 2021.09.14 - 1주차 ✏️

TIL 2021.09.16 - 1주차 ✏️

0개의 댓글

관련 채용 정보