code/css6 css와 html로 크리스마스 초대장 보내기 배운것을 이용해서 크리스마스 초대장을 만들어보았다.코드첨부~ 완성이다 !! grid가 너무 어렵다 구글링 해봐도 사실 이해가 완벽히 되지는 않았다. 2021. 2. 16. 박스모델 써먹기 글자에 못생긴 투박한 박스 말고 세련된 줄을 어떻게 그어야 하는지 배워보겠다. 일단 제목에 줄을 긋기위해서는 style 안에 h1을 건드려야겠지? 위에와 똑같이 border:1px solid gray를 써주면 하지만 우리는 밑줄만 그어지기를 원한다. border 대신 border-bottom을 입력한다. (자동완성에서 알 수 있음) 그런데 밑줄의 위치가 너무 애매하다 저번 시간에 배운대로 margin값이나 padding 값을 조절해줘야 하는데 그렇게 접근하기 보다는 소스검사로 접근을 해보자 캡쳐를 못했지만 태그에 마우스를 갖다대면 밑줄은 저어기 보이는 살구색 margin 값에 의해 달라지는 것을 알 수 있다. margin값을 없애준다. 그러면 이렇게 바뀐다. 그다음엔 세로줄을 긋는 작업을 하고싶어질 것이.. 2021. 2. 16. 박스모델 글씨에 박스모델을 넣어보면 알수 있듯 h1태그는 화면 전체(block level element) a태그는 링크부분(inline element) 이라는 것을 알 수 있다. 요로코롬 참고로 박스를 만드는 코드는 색깔이 왜 사라진지는 모르겠다.. 그렇지만 h1상자 거슬린다. inline으로 박스를 만들고 싶다 하면 h1태그 안에 display:inline; 을 입력해준다 반대로 아마스빈 링크를 전체화면으로 바꾸고 싶다 하면 a태그 안에 display:block; 이라고 해주면 요상하게..변한다 그리고 중복은 저기있는 border가 너무 겹친다. 이렇게 바꿀수 있다. 순서는 상관없다. 이제 다시 중요한 박스에 관해서 이야기 해보자 이 박스모양을 바꿔 보도록 하자 테두리 사이의 여백을 넣어두고 싶다하면 paddi.. 2021. 2. 14. css선택자의 중요한 토대 모든 스타일 태그를 지워준 후 1. 방문했던 태그는 회색 2.모든 원래의 태그는 검은색 3.들어가있는 공간의 태그는 빨간색 으로 만들어보는 작업을 해보겠다. 벌써부터 복잡시럽지만 참고 해보도록 하자! 첫번째로는 태그 안에 color:black; 작업을 해준다. 그리고 html과 css 부분을 회색으로 칠해주고 싶어서 태그안에 입력을 해주는데 우리가 무진장 싫어하는 중복이 발생한다;;; 그래서 그룹을 묶어주는 작업을 하는데 여기서 class라는 것을 도입한다. 보았다는 의미의 saw를 도임하고 스타일 태그 안에 이렇게 입력을 해주면 안된다............. 이유는 ??? class값이 saw라는 표시를 해주어야한다 그것은 바로 .saw .은 class값을 나타내는 것이다. 그러면 바뀌는 것을 볼 수 .. 2021. 2. 14. 이전 1 2 다음
