2024.6.20(목) TIL

🏃🏻‍♀️배운 것 

link 태그의 media 속성 

  <link rel="stylesheet" media="screen"  href="./layout.css">

link태그의  media 속성은 해당 css 파일이 어떤 장치에 최적화된 파일인지 설명하는 속성이다.  예를 들어  상단 코드의 layout.css는 컴퓨터나 테블릿, 스마트폰 등의 스크린화면에 최적화된 css 파일임을 설명한다. 웹사이트 개발을 위해서만 css와 html 코드를 사용했는 데 다른 장치 개발에도 link 태그를 사용한다는 점이 흥미로웠다. 

장치	설명
all	기본값으로, 모든 미디어 타입의 장치
print	인쇄 미리 보기 기능 또는 페이지 출력
screen	컴퓨터나 테블릿, 스마트폰 등의 스크린
speech	페이지를 소리 내어 읽어주는 스크린 리더기(screen reader)

css 파일이 어떤 장치에 최적화된 파일인지 설명하는 것외에도 반응형 웹사이트 구현을 위해 디스플레이 크기별 css 파일을 구분할 수 있다.

  <link rel="stylesheet" media=“screen and (max-width:900px)”  href="./layout.css">

상단 코드의 layout.css 파일은 스크린 화면 구성을 위한 css 파일이며 디스플레이 최대 너비 900px 을 기준으로 작성한 파일이다. 추가로 media=“screen and (aspect-ratio:16/9)” 처럼 aspect-ratio 값으로 디스플레이의 너비와 높이를 비율로 명시할 수 있다는 점이 유용해 보였다.

값	설명
width	대상 디스플레이 영역의 너비를 명시 ex) media=“screen and (max-width:900px)”
height	대상 디스플레이 영역의 높이를 명시 ex) media=“screen and (min-height:600px)”
orientation	대상 디스플레이 또는 종이의 방향을 명시 portrait: 세로 방향, landscape :가로 방향 ex) media=“print and (orientation:landscape)”
aspect-ratio	대상 디스플레이 영역의 너비와 높이의 비율을 명시함. ex) media=“screen and (aspect-ratio:16/9)”
.. 등등

 

[참고 자료]

https://www.tcpschool.com/html-tag-attrs/link-media

✍🏻회고(잘한 점, 아쉬운 점)

• 잘한 점: 최근 상급자에게  느끼는 불편한 점을  당사자에게 솔직하게 이야기했다. 이후 읽었던 "세이노의 가르침"이라는 책의 "스트레스의 뿌리를 없애라." 챕터에서 해당 행동이 스트레스 해법으로 나와 흥미로웠다.  사실 솔직하게 털어놓은 후 상급자와의 갈등이 해소되었지만 사실 이러한 행동(불편한 점을 솔직하게 이야기하는 것)이 과연 잘한 행동인지 의심스러웠는데 해당 책을 읽고 이러한 접근법이 너무 안좋은 방법은 아니겠다느꼈고 안도했다. 

🧐개선 방법

•  추가로 책에서는 이런 이야기를 덧붙인다. "상급자, 하급자 관계없이 당신이 느끼는 것을 뜸 들이지 말고 술 먹지 말고 커피 한잔 같이 하면서 내게 보냈던 메일(직장내 인간관계에서 오는 스트레스에 대한 고민의 메일)  그대로 솔직하게 이야기하여라.  이때 반드시 상대방이 하는 말도 인내심을 갖고 경청하여라." 관계 개선을 위해선  진솔함과 경청 둘다 중요하다는 뜻 아닐까? 생각했다.