css 썸네일형 리스트형 [CSS] position: stityck position: stityck static 속성과 fixed 속성의 특징을 동시에 갖고 있는 psotion: sticky sticky 를 사용하면 유저의 스크롤을 따라다니는 요소를 만들 수 있다. 비교 (static, fixed, sticky) https://codepen.io/creatijin/pen/VwbqwJR 예제2 https://codepen.io/creatijin/pen/yLbGLqg 사용전 고려해야할 사항 도달 위치 설정이 되어 있는지 확인 top bottum left right 속성 중 하나는 반드시 필요 크로스 브라우징 및 브라우저 확인 사파리에서도 동작려면 -webkit-sticky 속성 추가 부모 또는 조상 노드에 overflow 속성이 설정되어 있는지 확인 overflow: (hi.. 더보기 05 - Flex Panels image gallery 5번째 강의시간에는 CSS의 Flex를 통해서 이미지 갤러리를 만들어보는 시간이다. CSS에 Flex는 한국에서는 거의 사용하기 힘든 속성이다. 왜냐면... 익스플로러 상위버전에 사용 가능하기 때문에사용하기 쉽지 않다.그래도 알아두어야 나중에나 응용을 할 수 있기때문에 안쓴다고 해서 넘어가지 말자.https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90 MDN에서 css flex를 찾아본 결과이다. 자세히 나와있으니 모르시는 분들은 한번씩 읽어보면 좋을꺼 같다.자바스크립트의 토글을 이용해서 클라스를 추가하고 제거하고를 이용해서 효과를 주고 .. 더보기 CSS - Gradient CSS - Gradient 보통 웹 페이지의 텍스트는 검은색 아니면 배경에 따라 흰색 또는 단색계열로 많이 지정한다. 그라데이션 효과를 많이 사용하진 않지만 그렇다고 막 쓰기도 힘든것이 호환성?문제가 있다 브라우저 버전을 항상 최신으로 하는 것이 아니기 때문에 일부 하위버전에서는 적용이 안되는 큰 단점이 있다. 그라데이션은 css background 속성에 linear-gradient, radial-gradient 값으로 줄 수가 있다. 대충 포토샵을 사용해 봤으면 저 두개의 값이 어떤 효과를 주는지는 짐작이 갈거라고 생각이 든다. linear 는 세로,가로 형태로 그라데이션을 표현하고 radial은 원형 형태로 효과를 줄 수 있다. 1. 그라데이션은 위와 같은 형태로 효과를 줄 수 있다. 가로,세로 방.. 더보기 CSS - 크기 단위 오늘은 효과나 이런것 보다 크기 단위에 대해서 공부해보자보통은 픽셀을 많이 사용하는데 px말고도 여러가지 있다.가변 크기 단위 - 상대적인 크기를 지니는 단위emem은 요소에 지정한 글자 크기 단위, em단위를 쓰면 부모에게 지정한 글자 크기를 기준으로 배율을 조정[1em은 부모의 1배 2em은 부모의 2배]exex는 요소에 지정한 font-family에 의존한다.rem이 단위는 이해가 잘 안되서 여기저기 찾아본 결과 html에 지정된 크기를 기준으로? 상대적인 값을 가지게 된다고 한다.(사실 뭔소린지 잘 모르겠다~)IE8 이하는 인식을 못해서 사용에 주의해야 될꺼 같다고정 크기 단위 - 부모 또는 기타 요소들에 영향을 받지 않고 크기를 유지하는 단위in인치 (1in = 25.4mm)px1px = 모니터.. 더보기 CSS - Outline 요즘 CSS에 심취해있기 이것저것 찾아보다가 outline을 발견했다 ㅋㅋ 일딴 눈으로 보고 설명하는게 빠르기 때문에 결과는 위와 같다.dotted : 점선 테두리dashed : 짧은 선들의 연속solid : 실선으로 지정groove : 테두리가 안으로 파진것처럼 보임ridge : 테두리가 밖으로 튀어나온것처럼 보임inset : 테두리를 포함한 컨텐츠 영역이 안으로 들어간것처럼 보임outset : 테두리를 포함한 컨첸츠 영역이 밖으로 튀어나온것처럼 보임double : 선이 두줄로 보임auto : auto많이 쓸꺼같진 않지만 그래도 알고있으면 좋을꺼같다. 브라우저에서도 다 지원하고 익스는 8부터 지원하기 때문에 괜찬아 보인다. 더보기 CSS - box-sizing 요즘 자바스크립도 열심히하지만CSS도 관심이 생겨서 이것 저것 찾아보던중box-sizing 이라는걸 보게되었는데레이아웃 잡을때 매우 유용할꺼같다.box-sizing의 값은 총 4가지다.content-box : 콘텐트 영역을 기준으로 크기를 정함border-box : 테두리를 기준으로 크기를 정함initial : 기본값inherit : 부모 요소의 속성값을 상속위에는 좀 딱딱하게 설명했지만 쉽게 설명하면1번은 보통 우리가 설정을 안하고 했을때랑 똑같다2번이 중요한데 padding과 border의 크기를 width와 height 설정한 값에 포함한다?백번 설명보다 그냥 눈으로 보는게 빠르다.3,4번은 다른 요소에서도 볼 수 있는거기 때문에 설명은 생략하겠다. 1번 박스는 100px크기 안에 padding 과.. 더보기 CSS 반응형 웹 (Responsive Web) - test1 저번 면접때 주로 질문 받은건 반응형 웹이 가능하냐에 대한 질문을 많이 받았다. 내가 리뉴얼한 페이지는 반응형이 아니라 자신있게 할 수 있다고 말을 못했다. 준비되지 않은것에 자신있게 거짓말하기가 싫었다. 그리고 해본거랑 할 주 아는거는 차이가 크기 때문이다. 그래서 조금씩 해보기로했다. 처음에는 간단하게 시작하도록 하자. 미디어 쿼리 적용법은 4가지가 있다. 1.link 태그 안에 위치하여 media 속성 안 조건에 만족할 때 해당 css파일을 불러온다 2. 태그 안에 위치하여 media 속성 안 조건에 만족 할 때 스타일을 적용 시킨다 3. - @import 태그 안에서 @import를 사용하여 뒷 부분의 미디어 쿼리를 만족 할 때 해당 css파일을 불러온다. 4.CSS파일 불러온 css파일 안 혹은.. 더보기 css로 삼각형 만들기 보통은 포토샵이나 일러스트로 만들지만 css 만으로 삼각형을 만들 수 있다. 물론 이미 인터넷을 찾아보면 있다.나도 찾아보았다. ㅋㅋ 그래도 내껄로 만들기 위해 기록을 남긴다.저렇게 border를 값을 따로주고 1개를 뺀 나머지를 transparent를 주면 투명으로보여이렇게 삼각형이 나옵니다.신기합니다. ㅎㅎ 여러가지 방향 크기 색을 할 수 있기 때문에 간단하게 해결 가능합니다.이미지를 쓰는 것 보다 텍스트로 하는게 더 불러오는 속도가 빠르기 때문에더 좋다고 봅니다! 더보기 이전 1 다음
