분류 전체보기
-
display와 float의 차이Web/CSS 2020. 1. 12. 12:04
Navigation bar에서 설명했듯 display: inline-block; 과 float: left;는 비슷한 효과를 보여준다. 이번 편에서는 그 차이에 대해서 정확하게 알아보도록 하자. 아래 코드와 그 결과를 보도록 하자. See the Pen PoweLvv by Catnap421 (@catnap421) on CodePen. float의 경우, p태그의 내용이 박스 옆에 오고, display의 경우, 아래에 오는 걸 확인할 수 있다. 즉 하단에 다른 태그를 입력하면 그 결과를 쉽게 확인할 수 있다. float의 경우, 해당 요소의 크기만큼 할당해서 바짝 붙이기 때문에 box 요소가 float 되고 난 후, 남은 공간에 p요소가 오게 된다. 그러나 display의 경우, display: inline..
-
Navgation bar(내비게이션 바)Web/CSS 2020. 1. 11. 21:47
Nav bar(이하 내비게이션 바) 디자인은 CSS 레이아웃에서 중요한 역할을 한다. 내비게이션 바를 디자인할 때 크게 가로와 세로 두 가지 경우로 나눌 수 있다. 코드를 통해서 어떻게 가로와 세로로 디자인하는 지를 살펴보고, 그때 각 프로퍼티가 어떠한 역할을 하는지 알아보자. 가로로 디자인할 때(horizontal) See the Pen qBEYQrj by Catnap421 (@catnap421) on CodePen. Example explained: float: left; - use float to get block elements to slide next to each other display: block; - Displaying the links as block elements makes the ..
-
floatWeb/CSS 2020. 1. 11. 15:52
CSS에서 float는 레이아웃을 만들 때, 블록 요소들을 가로 정렬을 시킬 때 자주 사용한다. float의 간단한 사용법과 예시는 여기서 다루지 않고, 이 글에서는 float를 사용할 때 생길 수 있는 문제와 이를 해결할 수 있는 기법들에 대해 소개하고자 한다. float 프로퍼티가 선언된 자식 요소로 인한 부모 요소의 부적절한 높이 See the Pen bGNMoRv by Catnap421 (@catnap421) on CodePen. 자식 요소에 float 프로퍼티를 주게 되면 위 코드와 같이 부모 요소의 높이가 제대로 설정되지 않는다. float 요소는 일반적인 흐름상에 있는 게 아니기 때문에 float 요소의 높이를 알 수 없고, 부모 요소는 이로 인해 제대로 높이가 표현되지 않는다. 1. ove..
-
20.01.10 운동일지일상/운동 2020. 1. 10. 16:34
오늘은 진짜 빨리 일어났다. 9시쯤 일어났나?? 그래서 10시에 운동하러 가서 시간이 너무너무 남아서 좋았다. 오늘은 어깨를 하는 날이었는데, 원래 군대에 있을 때는 덤벨로 사이드 레터럴 레이즈를 했어서 너무 자세가 어렵다고 느꼈는데, 헬스장에는 머신이 있어서 이를 이용해보니 너무너무 자극이 잘 와서 좋았다. 자세도 편하고, 자극에만 집중하기도 좋고.. 펌핑 감 너무 좋았다. 어깨는 측면이 중요하다 해서 군대에선 정말 측면만 했는데, 그게 많이 후회된다. 전면이 비실하다보니 뭔가 어깨가 작아 보이는 게 마음에 들지 않는다. 바벨 원판을 두 손으로 잡고 앞으로 드는 걸 많이 해줘야겠다. 어깨 운동을 마치고 복근을 했다. 참고로 나는 배에 지방이 적어서 기본적으로 복근이 어느정도 보이는 편이다. 근데 진짜 ..
-
20.01.09 운동일지일상/운동 2020. 1. 9. 16:00
오늘은 정말 잠을 많이 잤다. 왜 그렇게 많이 잤지... 하체를 하는 날인데, 그게 마음에 부담으로 다가간걸까...? 아무튼 오늘은 한 시간 더 늦게 일어난 탓에 평소랑 달리 밥을 먹고 출발을 하게 됐다. 집에 있는 소고기랑 누나가 해준 볶음밥을 먹고 헬스장으로 출발! 오늘은 간단하게 스쿼트랑 레그 익스텐션 위주로 했다. 내가 허리가 약한 탓에(인자약..) 벨트를 집에서 가져가서 리프팅 벨트를 차고 스쿼트를 진행했다. 원래는 스미스 머신으로 스쿼트를 하지 않지만, 오늘은 네거티브 방식으로 운동할 생각이었어서 스미스 머신을 통해 최대한 네거티브한 방식으로 운동을 해 주었다. 확실히 천천히 운동을 하니까 자세 하나하나에 집중할 수 있었고, 더 자극이 잘 느껴졌던 것 같다. 스쿼트를 하고나서 레그 익스텐션으로..
-
20.01.08 운동일지일상/운동 2020. 1. 8. 15:09
오늘 아침은 상당히 피곤하게 일어났다. 아마 6시 30분쯤에 일어났는데, 설날 기차표 예매 때문이다. 그렇게 아침에 큰누나 설날 기차 예매하는 걸 도와주고, 다시 잠을 청했다. 그리고 10시 쯤에 일어나 11시에 운동을 하러 갔다. 오늘도 역시나 이른 시간부터 운동하는 사람들이 많았다. 다들 정말 부지런하다. 간단하게 스트레칭을 하고, 바로 가슴 운동을 했다. 전날 운지기님 영상 시청을 했는데, 새로 배운 점(스트레칭은 자주!!, 빌더들은 이완이 더 중요하다!!)들을 계속 상기하면서 운동하니 자극이 매우 잘 와서 기분 좋게 운동을 할 수 있었다. 그리고 내가 딥스를 잘 못하고 자극을 잘 찾지 못해서 꺼렸는데, 영상에서 딥스 자세랑 주의점을 자세히 알려줘서 덕분에 처음으로 제대로 된 딥스에 성공했다!! (..
-
[프로그래머스 Level 1] 약수의 합알고리즘 문제풀이 2020. 1. 7. 21:13
문제 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 제한 사항 n은 0 이상 3000이하인 정수입니다. 입출력 예 n return 12 28 5 6 이 문제는 비교적 해결하기 쉬운 문제였지만, for문의 반복 범위를 고려하지 않으면 시간초과로 실패할 수 있는 문제이다. 해답은 [프로그래머스 Level 1] 소수찾기와 동일하다. 어떤 수 n은 n의 제곱근 이하의 수와 그 이상의 수의 곱으로 표현이 가능하다. 그러므로 i를 n의 제곱근까지만 반복해주면 이 문제를 시간복잡도 O(root n)으로 해결 가능하다. function solution(n) { var factor = new Set(); if(n == 0){ return 0; } for(var i ..
-
[프로그래머스 Level 1] 소수찾기알고리즘 문제풀이 2020. 1. 7. 20:37
1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.) 제한 조건 n은 2이상 1000000이하의 자연수입니다. 입출력 예 n result 10 4 5 3 위 문제를 처음 접했을 땐 평범한 소수찾기 문제인 거 같아서 매우 쉽다고 생각을 했다. 근데 범위 내에서 소수를 구하는 문제이기 때문에 에라토스테네스의 체를 활용하는 게 좋겠다는 생각이 들었다. 그럼 한 번 구현해보자. function solution(n){ var answer = Array(n+1).fill(1); // ㉠ answer[1] = 0; answer[0] = 0; for(var j = 2; j