지지나

HTML/CSS 공부에서 박스모델을 잘 이해하는 것이 중요하다. MS사에서 발표한 가장 많이 쓰는 css속성 중 70%를 요 박스모델 관련한 속성이 차지하고 있는 만큼, 이번 기회로 잘 알고가자! 블록 태그인 태그에 h1{border: 5px solid red;}로 5픽셀의 빨간 테두리를 줬다. 지금은 테두리랑 '대파라면'사이에 간격이 아예 없다. 그래서 요렇게 padding을 이용해서 20픽셀만큼 간격을 줬다. '대파라면' 양옆, 위아래에 간격이 보이는 것을 알 수 있다. 즉, 박스모델 안쪽에 여백이 생기는 것이 padding 이다. 여기에 또다른 h1 태그를 하나 더 추가해 보았다. 적용한 css 속성은 당연히 같다^^ 여기서 margin에 대해서 알고 갈 건데 margin: 0; 과 margin: ..

수업시간에 배운 것을 생활코딩 영상을 보면서 복습하면 도움이 참 많이 된다. 가뜩이나 짧은 수업시간에 여러 내용을 전달하려면 강사님의 개념설명은 더더 간단해지기 때문이다. 그래서 수업때 잘 이해가 안 간 것을 생활코딩을 보면서 개념을 잘 잡고 가려고 한다. HTML 태그에서 블록과 인라인 태그의 차이를 아는 것이 중요한데, 이번에 함께 알아가도록 하자. 예제를 만들어 보았는데, 태그 안에 태그와 태그를 사용했다. 똑같이 한 줄에 썼으나 h1 태그로 담긴 '대파라면'은 줄바꿈이 되어있고, 화면 전체를 사용하는 것을 볼 수 있다. 반면 하이퍼링크가 담긴 '인스턴트 라면'의 a 태그는 줄바꿈이 이루어지지 않는다. 제목인 h1 태그는 내용의 핵심적인 것을 담고 있이게 줄바꿈을 해서 화면 전체를 쓰는 것이 더 간..

안녕하세요 지지나입니다! 주말마다 html/css 수업을 듣는데, 웹퍼블리셔 과정이다 보니 포토샵능력을 요구할 때가 간혹 있네요ㅎㅎ 저는 개발을 배우고 싶다는 첫 방향으로 정한 길인데, 점점 더 디자인 쪽으로 가는것 같은 기분입니다ㅋㅋ그래도 html/css는 프론트엔드 개발자가 되려면 꼭 알아야 한다고 생각해 열심히 듣고 있습니다. 아무튼 수업시간에 프로그래밍을 위해 필요한 이미지를 만들었는데요, 포토샵을 이용해 하나의 이미지를 여러 개로 분할한 후, 자른 이미지들을 한번에 저장하는 것을 배웠어요. 왠지 저도 알면 다음에 유용하게 쓸 수 있을것 같아서 기록용으로 남깁니다. 포토샵을 실행 후, 내가 분할하고 싶은 이미지를 열어주세요. 포토샵 화면의 왼쪽, 윗쪽 눈금표시는 단축키 Ctrl+R 을 이용하면 가..