자바스크립트를 소개합니다. 자바스크립트는  사용자와 상호작용할 수 있도록 돕는기능을 합니다. 자바스크립트는 독립적인 컴퓨터 프로그램이라는 점에서 '완전한' 프로그램언어입니다.  코더가 원하는 대부분의 일들을 수행하는 소프트웨어입니다.   자바스크립트란 무엇인가  자바스크립트는 이책에서 배우는 첫번째 '제대로 된' 코딩언어입니다. 루프, 변수, IF문같은 프로그래밍툴을 사용할 수 있습니다. 특정한 텍스트를 클릭하면 사라지는 기능부터 구글문서를 위한 오피스 프로그램 같은 완전한 응용프로그램을 생성하는 것까지 전반적인 업무에 사용할 수 있습니다. 페이지 자체를 새로 띄우지 않으면서 쌍방향 기능을 제공하는 모든 웹사이트는 자바스크립트를 사용합니다.   자바스크립트의 특징  자바스크립트는 서버가 아니라 사용자의 ..

CSS를 연습하는 가장 좋은 방법은 자신이 좋아하는 스타일의 웹사아트를 똑같은 모양으로 복제하는 것입니다 google.com과 같은 단순한 모습의 사이트부터 시작해서 bbc.co,.uk/news 와 같은 복잡한 사이트까지 도전해보세요.   사이트 중 하나를 선택해서 정확한 복사판을 만들려고 해보십시오. 그과정에서 많은 것을 배울 수 있을 겁니다. 축하합니다 지금까지 css의 기본을 배우셨습니다. 이제 html과 결합시켜서 어지간한 웹사이트는 디자인할 수 있습니다. 이제 자바스크립트로 넘어갑니다. 자바스크립트는 웹페이지에 엄청난 힘을 불어넣어 줄 것입니다. 사용자가 앱이나 소프트웨어를 사용하는 듯이 상호작용할 수 있게 해줍니다.   - css를 더 배울수 있는 곳 -  쌍방향 css코딩강의   Catalo..

링크도 스타일설정이 가능합니다. 링크방법으로 주로 사용되는 몇가지 방법을 본다면 첫째, 링크아래 밑줄을 없앱니다. 컬러로 링크를 구분하기 때문에 밑줄까지 칠 필요가 없고 보기에 예쁘지도 않습니다. 링크에서 밑줄을 없애려면 아래 스타일설정을 사용합니다. text-decoration: none;  더 재미있는 방법으로 사용자가 링크에 마우스 포인터를 올리면 원하는 스타일설정으로 보이도록 하는 유사 클래스라는 것도 있습니다 아래 코드를 사용합니다. a:hover {                color: green;                } 이 두가지 명령을 함께 사용하면 링크의 밑줄을 없애고 이를 탐색할 때 녹색으로 변합니다      2024.08.01 - [코딩] - CSS- 텍스트정렬2024.08...

워드프로세서와 마찬가지로 CSS를 이용하여 텍스트를 왼쪽이나 오른쪽, 양끝맞추기로 정렬할 수 있습니다. 아래 스타일을 추가하면 됩니다 text-align: right;  이를 적용하면 문단이 아래와 같이 나타납니다.  텍스트가 오른쪽으로 정렬되어 있습니다    왼쪽으로 정렬하려면 다음과 같이 바꾸어 주면 됩니다 text-align: left;  기본설정이 왼쪽 정렬이므로 굳이 이를 사용할 이유는 없습니다.  양끝맞추기를 위해서는 다음과 같이 사용하면 됩니다 text-align: justify;      2024.08.01 - [코딩] - css-웹페이지의 텍스트스타일 바꾸기2024.08.01 - [코딩] - css-웹페이지의 폰트바꾸기2024.07.31 - [코딩] - CSS-text상자 테두리를 둥근모..

폰트 지정외에도 텍스트에 여러가지 스타일작업을 할 수 있습니다. 텍스트를 굵게, 이탤릭체로, 밑줄을 긋는 등 다양한 형태로 만들 수 있습니다 그럼 문단을 볼드체로 만들어 봅시다 아래처럼 코드를 입력합니다.     p  {       font-weight: bold;      }  이 코드를 넣어서 결과물을 출력하면 다음과 같이 보입니다     글자가 더 짙어지고 굵어진 것을 볼 수 있습니다.   그렇다면 문장에서 한두 개의 단어만 볼드체로 하고 싶다면 어떻게 해야 할까? 이를 위해서는 '스팬'이라는 구성요소를 사용해야 합니다. 이 요소 자체로는 아무런 결과가 나오지 않지만 구성요소의 개별적 부분의 스타일을 설정할 수 있는 기능입니다. 웹페이지의 문단을 다음과 같이 바꿔봅시다.  this text is b..

웹페이지의 폰트를 바꿀 수 있습니다. 지금까지는 웹페이지의 모든 텍스트를 브라우저의 기본 설정 폰트(크롬의 경우 타임스 뉴 로만)로 표시했습니다        위의 코딩은 기본적인  'this is some text' 텍스트출력을  보여주는 코딩입니다 여기에 스타일을 추가해보겠습니다  body  {              font-family: cursive;}   폰트를 cursive체로 바꿨습니다  그럼 위의 결과물과 어떻게 달라졌는지 보겠습니다      글씨체가 예쁜 cursive 체로 바뀌었습니다    지금까지 제가 블로그를 만든 과정을 보시면 하나 하나 설명드린 것을 적용해서 만들고 있기때문에 블로그 글들이 조금씩 변해가는 모습을 보실 수  있습니다

둥근 모서리는 테두리선과 관련이 있습니다. 이는 CSS언어의 가장 최신 버전인 CSS3에 추가되었습니다. 모서리를 둥글게 하려면 보더레이디어스를 사용합니다. CSS에 보더를 아래 스타일로 바꿉니다.    border-radius: 10px;           텍스트박스를 만들면 모서리가 이렇게 둥그렇게 나타나는 결과를 보여줍니다     이제 둥근 모서리를 가진 사각형이 보입니다. 보더레이디어스 값은 대체로 5~10픽셀이 적합한 값입니다.

텍스트가 쓰여지는 구성요소에 테두리를 더해서 웹페이지의 다른 부분과 간단하게 구분할 수 있다. 테두리는 복잡한 페이지의 가독성을 높여 줍니다. 그리고 페이지에 약간의 그래픽 효과를 줄 수 있습니다    지금 위와 아래에서 보시는 것처럼 텍스트 주위로 회색 테두리가 만들어집니다. 이렇게 만드는 코딩을 해보겠습니다    css코딩모드에서 다음과 같이 코딩을 입력해 줍니다  그러면 바로 위에보시는 회색테두리의 결과가 나오게 됩니다      3px : 이는 테두리의 폭이다 solid : 테두리의 유형이다. dotted, dashed, groove,  ridge 등과 같은 다른 테두리 유형도 시험해 보라 대체로 solid가 가장 많이 쓰인다.grey : 테두리 컬러다 원하는 컬러를 사용할 수 있다. 또는 #47D..

패딩 (adsbygoogle = window.adsbygoogle || []).push({});  (adsbygoogle = window.adsbygoogle || []).push({}); 파란색과 빨간색 div 모두 텍스트에 안쪽 여백이 없다. div의 경계와 텍스트 사이에 일정간격이 있으면 더 예쁘다. 이를 위해 '패딩'을 이용한다. 아래규칙을 divA에 적용해 보자.   padding : 10px;  이를 통해서 빨간색 사각형 안쪽에 10픽셀의 패딩이 생겨난다.                   (adsbygoogle = window.adsbygoogle || []).push({});

마진 마진은 선택적인 그리고 어떤 의미에서는 더 간단하게 구성요소의 위치를 설정하는 방법이다. 실습을 위해 divA 와 divB에서 모든 플로팅과 위치 설정규칙을 지우고 아래 코드를 divA에 추가한다. margin: 20px; 이 코드는 빨간색 div주변에 20픽셀의 여백을 만든다. 다음 그림과 같은 모습이다. 빨간박스는 위쪽, 왼쪽으로 각각 20px의 여백을 가진다. 마진은 대상을 이동시키고 원하는 만큼의 간격을 설정하는 훌륭한 방법이다. 유사한 방법으로 구성요소 내부에 여백을 설정할 때 '패딩'을 사용할 수 있다