Do it! 반응형 웹만들기 공부 2일차다. 02파트를 하루만에 끝내고 싶은 욕심이 있었지만 훑어보니 calc함수와 폰트와 멀티미디어의 가변 등 익숙하면서도 생소한 파트가 나와서 욕심을 버리고 반으로 나누어서 공부하였다.
기존의 반응형을 훑어보기 식으로만 알고 있을때에도 div나 여러 요소들을 단위가 px로 고정된 값이 아닌 %로 하여금 가변적으로 반응하도록 하고 있다는 것은 알고 있었다. 하지만 margin이나 padding 값을 고정할 수 있다는 생각을 하지 못해서 선호하지 않고 있었는데 오늘 책을 보면서 calc 함수로 고정할 수 있다는 사실을 처음 알게 되었다.
움직이는 가변패딩을 사용하는 방법
(가변 패딩을 적용할 패딩값/적용할 박스를 감싸고 있는 박스의 가로너비)*100= 가변패딩 %값
가변 p박스 안에 텍스트가 넘쳐도 출력되는 코드
가변 p박스 안에 텍스트가 넘치면 p태그가 함께 길어지는 코드
고정된 가변패딩을 사용하는 방법
넓이(전체-(좌여백+우여백)) 설정 후 마진 값 설정
(여백이 3군데 이상이면 어떻게 될 지 잘 모르겠어서 겠다.)
calc 함수는 언제 사용해야하는가?
html에서 박스는 가변적으로 변하되 마진 값이나 패딩 값은 변하지 않고 고정되어 있도록 설정하고 싶은 경우에 사용하는 것이 calc 함수다. 하지만 Can I use 사이트에서 확인해보면 인터넷익스플로어에선 될 수도 있고 안 될 수도 있어서 그런지 관공서 작업을 하는 곳에선 사용하지 않는 것이 좋을 것 같다.
사실 실무자들에게 물어보면서 공부하는 편인대 calc 함수에 대해서 프론트단 개발자는 꽤 알고 있으나 아주 미묘한 차이로 느려져서 잘 쓰지 않거나 관공서 작업할 경우 먹지 않는 경우가 많아서 쓰지 않는다는 답변을 많이 들었고 디자이너들은 대부분 잘 모르는 태그였다. 나도 아직 정확하게 이해한게 아니여서 있다고 알고 넘어가고 다음에 쓸 일이 생긴다면 그때 다시 검색해서 써봐야겠다.